ESL Scrollbar

ESLScrollbar is a reusable web component that replaces the browser's default scrollbar with a custom scrollbar implementation.

ESLScrollbar is entirely configurable and can be styled through CSS.

ESL Scrollbar supports:

  • both scroll directions: vertical and horizontal.
    Direction can be defined with the boolean horizontal attribute.

  • independent target scrollable element definition using ESLTraversingQuery

  • complete customization from CSS

  • RTL for both directions and all browsers on ESL support list

Getting Started:

  1. Register ESLScrollbar component
  import {ESLScrollbar} from '@exadel/esl';
  ESLScrollbar.register();
  1. Add the <esl-scrollbar> custom tag, and define its target and direction:
  <div class="content esl-scrollable-content">
    <p>Content...</p>
    <esl-scrollbar target="::parent"></esl-scrollbar>
  </div>
  <!-- or  -->
  <div class="esl-scrollable-content">
    <p>Content...</p>
  </div>
  <esl-scrollbar target="::prev" horizontal></esl-scrollbar>

Note: use esl-scrollable-content OOTB class to hide browser native scrollbar. Use the full module path to import it

  @import '@exadel/esl/modules/esl-scrollbar/core.css';

Attributes:

  • horizontal [boolean] - horizontal scroll direction marker

  • target - ESLTraversingQuery to find the container of scrollable content

  • thumb-class (default scrollbar-thumb) - class(es) that will be added to the scroll thumb

  • track-class (default scrollbar-track) - class(es) that will be added to the scroll track

  • no-continuous-scroll [boolean] (default false) - disable continuous scroll when the mouse button is pressed on the scrollbar

Readonly Attributes

  • inactive [boolean] - appears when the scrollable content fits the container, or there is nothing to scroll

  • dragging [boolean] - indicates that the scrollbar thumb is currently being dragged

  • at-start [boolean] - indicates that the scroll is at the beginning

  • at-end [boolean] - indicates that the scroll is at the end

Public API methods

  • refresh() - shortcut function to refresh the scrollbar state and position

Events

  • esl:change:scroll (non-bubbling) - thrown every time the scroll change state/position