Some websites / web apps have the opposite problem: too many scrollbars.
MacOS has a setting to hide scrollbars when a mouse isn’t plugged in (i.e. when just using the trackpad on a laptop), and it’s enabled by default. Even if you force a scrollbar to appear using CSS (overflow: scroll), it won’t appear.
I’ve seen sites where some boxes had two or three sets of scrollbars, because the developer didn’t test on desktop OSes other that MacOS (or on MacOS with a mouse plugged in) and didn’t realise that their CSS was adding scrollbars to too many elements.
Some websites / web apps have the opposite problem: too many scrollbars.
MacOS has a setting to hide scrollbars when a mouse isn’t plugged in (i.e. when just using the trackpad on a laptop), and it’s enabled by default. Even if you force a scrollbar to appear using CSS (
overflow: scroll), it won’t appear.I’ve seen sites where some boxes had two or three sets of scrollbars, because the developer didn’t test on desktop OSes other that MacOS (or on MacOS with a mouse plugged in) and didn’t realise that their CSS was adding scrollbars to too many elements.
In any case, your design should have an affordance to show that there’s more content that can be scrolled to. A common way to do it is fading out or having a shadow on the scrollable edge. This technique is close to 15 years old but I still see it used today: https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/. The Chrome dev site has some brief notes on some more modern techniques: https://developer.chrome.com/docs/modern-web-guidance/guides/ui-atoms/scrollability-affordance-hints