CSS Components / Scrollbars

Scrollbars

This component has been deprecated

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

Playground