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.
But let’s say there is no scrollbar. That’s super common. macOS hides scrollbars by default 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;.
Why does this matter? If you don’t know an area is scrollable, you might miss out on important content or functionality.
I regularly think about the Perfectly Cropped 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 scroll there.
The result of that was Tyler’s mom literally not being able to find functionality she was used to. Not great.
There is an elaborate way 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 the user’s preference), requires DOM manipulation tests, and uses vendor-prefixed CSS (which will probably live a long time, but has been standardized now, so maybe not forever).
I enjoy these approaches and by Chris Smith and his thinking:
My favorite are the shadow-based techniques. To me an inset shadow is a really clear indicator, as it makes it appear that content is flowing underneath and the shadow follows an edge that as a hint that you can scroll in that direction. Plus, you’ve got CSS control there so I’d think it could match whatever UI situation you’re in fairly easily.
It should be known though that it can be done entirely in CSS though, no JavaScript, and is one of the great CSS tricks.
Hello! Thanks for nice examples. I guess there is typo and callback function name for example5 has to be changed.
Personally I like the bouncing arrow prompting me to scroll down that you see on a few modern sites. The inset shadow doesn’t scream “scroll me” in my opinion as blatantly as a bouncing arrow.
Fair enough. But I’m sure you can imagine that an entire site (or operating system) full of bouncing arrows might be too much.
The shadow options are nice, but when you are at the bottom you’d expect the shadow to disappear. Also you’d expect a shadow at the top in that case.
Or you’d expect the shadow to disappear when you start scrolling and then you assume the user knows he/she can scroll. Maybe on a next page load the shadow can reappear as first.
that’s exactly how scroll shadows work:
Nice article, however you’ve defined the ‘setFade’ function twice, so scrolling to the bottom of the fourth example triggers the fifth example’s callback – just thought you might wanna know!
I just want to publicly appreciate the title of this post.
That is all.