{"id":6397,"date":"2025-07-16T08:13:36","date_gmt":"2025-07-16T13:13:36","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6397"},"modified":"2025-07-16T08:13:37","modified_gmt":"2025-07-16T13:13:37","slug":"adaptive-alerts-a-css-scroll-state-use-case","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/adaptive-alerts-a-css-scroll-state-use-case\/","title":{"rendered":"Adaptive Alerts (a CSS scroll-state Use Case)"},"content":{"rendered":"\n

Sometimes it\u2019s useful to adapt the controls available to users based on whether they\u2019ve scrolled through key position<\/strong>s on a page.<\/p>\n\n\n\n

Here’s an example: a user scrolls through a Terms & Conditions page. If they click \u201cagree\u201d without<\/em> having scrolled down until the end, we could prompt them with a “please confirm you’ve read these terms” before continuing. Whereas if they have<\/em> scrolled down the whole way, that could imply they have read the terms, so we don’t need the additional prompt. <\/p>\n\n\n\n

Implementing something like this is relatively easy with the recent CSS scroll-state queries (browser support<\/a>).<\/p>\n\n\n\n

The following is an example of exactly as described above. If you click the \u201cSign Up\u201d button without having scrolled down until the end, you\u2019ll see an additional prompt reminding that you might not have read the terms yet and if you\u2019d still like to sign up. And if the \u201cSign Up\u201d is clicked after the text has been scrolled to the end, the sign-up acknowledgement pops up without any confirmation prompt first.<\/p>\n\n\n\n\t\t

\n\t\t\t