How CSS for scrollbars works

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.

Last Updated: 2022-12-01

Scrollbars are controlled with the overflow property.

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