Long content inside a box needs to scroll without feeling trapped. These scroll areas handle thin scrollbars, fades and blurs at the edges that hint at more, and containers that behave the same across browsers. Check each one with a trackpad, a mouse wheel and a keyboard, since all three should work. Install one and put your own long list or panel inside it.
Scroll areas style the regions inside a page that scroll on their own: thin custom scrollbars, edges that fade or blur where content continues, and containers that hint there's more to see.
Keep native scrolling underneath so trackpads, touch and the keyboard all behave as people expect. A fade at the edge is often clearer than a styled scrollbar, and the region needs to be focusable so keyboard users can scroll it too.
Frequently asked questions
Use scrollbar-width and scrollbar-color, which most browsers support, and the ::-webkit-scrollbar selectors for finer control in Chrome and Safari. Keep it wide enough to grab and visible enough to notice.
Apply a mask-image with a linear gradient at the edges where content continues, and remove it at the start or end. It tells people there's more without drawing a scrollbar.
Rarely. Native scrolling handles trackpads, touch, momentum and keyboard for you. Style the region around it instead, and only take over scrolling for special cases like snapping galleries.
Give the scrolling element tabindex=0 and a label if it holds content, so keyboard users can focus it and scroll with the arrow keys. Make sure its focus ring is visible.
Set scrollbar-width: none and hide the ::-webkit-scrollbar for the element. Only do it where scrolling is obvious, like a swipeable row, and add a fade so people know there's more.
Lay the items in a row with overflow-x: auto, add scroll snap so they settle cleanly, and keep enough of the next item visible to show the row continues.
Layer a backdrop blur or a gradient mask at the edges of the container, above the content. It softens the cut and signals there's more to scroll.
