MoreLesson 249Free preview

Custom Scrollbar

This lesson is part of How To · All levels

Summary

The scrollbar can be styled to fit the design of the site, especially in Chromium- and Safari-based browsers. WebKit provides pseudo-elements such as `::-webkit-scrollbar` and `::-webkit-scrollbar-thumb`, while Firefox uses scrollbar-width and scrollbar-color. Always keep the contrast and size to keep the scrollbar easy to use.

Key points

`::-webkit-scrollbar` sets the size of the scrollbar area in WebKit.
::-webkit-scrollbar-thumb is the part that is dragged; give color and border-radius.
Firefox uses `scrollbar-width` and `scrollbar-color` (thumb track).
Do not make the thumb too thin or the contrast too low to make it difficult for the user.

Full lesson

Code examples and quizzes

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