Scrollbars
The
@zendeskgarden/css-scrollbars
package is no longer supported.
The .c-scrollbar component
classes are used to style custom scrollbars. This component comes with
an important caveat which is that the first rule of custom scrollbars
is: don't use custom scrollbars. “But my designs look janky in
IE11.” In that case, use the -ms-overflow-style:
-ms-autohiding-scrollbar extension property to reduce the
visual noise. Still not convinced? One final warning: scroll hooking is
considered bad practice; please use this component with care.
Basic Structure
The scrollbar CSS classes are based on naming found within the
::-webkit-scrollbar
CSS pseudo-elements and describe the following canonical structure.
Apply height/width properties to the
.c-scrollbar container in order to format
content as needed.
-
<div class="c-scrollbar">-
<div>YOUR SCROLLABLE CONTENT HERE</div> -
<div class="c-scrollbar__track c-scrollbar__track--vertical">-
<div class="c-scrollbar__thumb c-scrollbar__thumb--vertical">
-
-
<div class="c-scrollbar__track c-scrollbar__track--horizontal">-
<div class="c-scrollbar__thumb c-scrollbar__thumb--horizontal">
-
-
Demo
The .c-scrollbar child
components combine with classes that style the popular
perfect-scrollbar
plugin. Use new PerfectScrollbar('.c-scrollbar')
to initialize. The following image blocks feature custom scrolling
provided by perfect-scrollbar.
State
.c-scrollbar
.c-scrollbar__track.is-scrolling
.c-scrollbar--dark
.c-scrollbar__track.is-scrolling
.c-scrollbar
.c-scrollbar__track.is-active
.c-scrollbar--dark
.c-scrollbar__track.is-active