Last Updated: 2024-04-17

Scrollbars are controlled with the overflow property.

• visible - default - extra content is visible but is rendered outside element's box. It literally flows out (no scrollbar here)
• hidden - overflow clipped and invisible.
• auto - scrollbar added only when necessary
• scrollbar - scrollbar added inside the box for viewing rest of content. Adds horizontal and vertical scroll bars (even if you don't need one of them). Although no scrollbar appears if content fits in space.

Design gotchas

Be aware of what widths are changed by presence of scrollbar. Usually it's the content width (i.e. the scrollbar's width goes between the padding and the border).

Accessing scrollbar distances in JS

window.scrollY tells you number of pixels document is currently scrolled along the vertical access. Another name for this property is window.pageYOffset

References

• https://www.w3schools.com/css/css_overflow.asp