MoreLesson 250Free preview

Hide Scrollbar

This lesson is part of How To · All levels

Summary

Hiding the scrollbar can make the view cleaner, but the content should remain scrollable. In WebKit, the::-webkit-scrollbar {display: none} hides the scrollbar, while Firefox uses the scrollbar-width: none. Avoid overflow: hidden if you mean just hide the visual scrollbar, because it turns off the rolling ability.

Key points

Scrollbar-width: Hiding the scrollbar in Firefox without turning the scroll off.
::-webkit-scrollbars {display: none;} do it in Chromium and Safari.
Overflow: hidden prevents scrolling, so it's not the same way.
Hide the scrollbar only if there's still a hint that the content can be scrolling.

Full lesson

Code examples and quizzes

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