Introduction.
WebKit-based browsers such as Chrome and Safari allow you to customize the scrollbar design. This section describes how to do so and what to keep in mind.
Implementing Custom Scrollbars
In WebKit-based browsers, the scrollbar style can be customized using the pseudo-element ::-webkit-scrollbar. The following is a basic implementation of a custom scrollbar.
::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5 ); box-shadow: 0 0 1px rgba(255,255,255,.5); }Notes
-The property webkit-overflow-scrolling: touch; is intended to achieve smooth scrolling behavior on iOS devices. However, this property and custom scrollbar styles cannot be used together. Therefore, avoid using both at the same time.
Conclusion
When implementing custom scrollbars in WebKit-based browsers, care should be taken when using them in conjunction with smooth scrolling. Keep in mind that the implementation should be done to improve the user experience, taking both design and functionality into consideration.