{"id":318581,"date":"2020-08-14T13:00:33","date_gmt":"2020-08-14T20:00:33","guid":{"rendered":"https:\/\/css-tricks.com\/?p=318581"},"modified":"2020-08-14T13:00:34","modified_gmt":"2020-08-14T20:00:34","slug":"thats-just-how-i-scroll","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/thats-just-how-i-scroll\/","title":{"rendered":"That’s Just How I Scroll"},"content":{"rendered":"\n

How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I don’t think anyone is confused at what a scrollbar is or what it indicates.<\/p>\n\n\n\n

But let’s say there is no scrollbar. That’s super common. macOS hides scrollbars by default<\/a> and only shows them during scroll. Most mobile browsers don’t have scrollbars, even if you attempt to force them with something like overflow: scroll;<\/code>.<\/p>\n\n\n\n

Why does this matter? If you don’t know an area is scrollable, you might miss out on important content or functionality.<\/p>\n\n\n\n\n\n\n\n

I regularly think about the Perfectly Cropped<\/a> story from Tyler Hall. There is a screen on iOS that has important functionality you need to scroll down to, but there is no indicator whatsoever that you can<\/em> scroll there. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

The result of that was Tyler’s mom literally not being able to find functionality she was used to. Not great.<\/p>\n\n\n\n

There is an elaborate way<\/a> to detect visible scrollbars and force them to be visible, but something about that rubs me the wrong way. It doesn’t honor a user’s preference (assuming it is<\/em> the user’s preference), requires DOM manipulation tests, and uses vendor-prefixed CSS (which will probably live a long time, but has been standardized<\/a> now, so maybe not forever). <\/p>\n\n\n\n

I enjoy these approaches and by Chris Smith and his thinking:<\/p>\n\n\n\n