@zendeskgarden/css-scrollbars
This package contains a set of classes for styling vertical and horizontal custom scrollbars (tracks and thumbs).
Installation
npm install @zendeskgarden/css-scrollbars
Usage
Once installed, scrollbars CSS can be accessed via postcss-import
.
@import '@zendeskgarden/css-scrollbars';
Component CSS provides styling for the following basic scrollbar structure.
<div class="c-scrollbar">
<div>YOUR SCROLLABLE CONTENT HERE</div>
<div class="c-scrollbar__track c-scrollbar__track--vertical">
<div class="c-scrollbar__thumb"></div>
</div>
</div>
Apply height/width to the .c-scrollbar
container in order to format
content for the intended layout.
Modifications
See http://zendeskgarden.github.io/css-components/scrollbars/ for modification classes, including dark mode and support for RTL.
Behavior
This component only applies scrollbar styling. Actual custom scrollbar behavior requires JavaScript support.