MoreLesson 251Free preview

Show/Force Scrollbar

This lesson is part of How To · All levels

Summary

Sometimes the scrollbar needs to be always visible so that the layout does not shift as the content increases. overflow-y: scroll forces the scrollbar to appear, whereas overflow: auto only displays it when necessary. Scrollbar-gutter property: stable can back up the scrollbar space from the start without forcing the bar to be visible.

Key points

Overflow: scroll always provides the scrollbar, even if the content is loaded.
Overflow: auto displays scrollbars only when content is overflowing.
Scrollbar-gutter: stable backs up space so the layout doesn't jump.
Give the high or max-height element so the overflow actually happens.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.