esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • Tabs
    • Toggleable

ESL Scrollbar

Related Examples

  • 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

ESL v4.2.0 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko