ESL Drag to Scroll

ESL Drag To Scroll Mixin

ESLDragToScrollMixin (esl-drag-to-scroll) is a custom attribute that enables drag-to-scroll functionality for any scrollable container element. This mixin enhances user experience by allowing intuitive drag-based scrolling, making it easier to navigate through content.

Configuration

The mixin uses a primary attribute, esl-drag-to-scroll, with optional configuration passed as a JSON attribute value.

Configuration options:

• axis (string) - determines the scrolling axis to control. Possible values:
  • 'both' - both horizontal and vertical scrolling (by default);
  • 'x' - horizontal scrolling only;
  • 'y' - vertical scrolling only.
• cls (string) - class to apply to the element during dragging to indicate the drag state. By default, the class dragging is applied.
• tolerance (number) - a minimum distance to move before the drag action starts. By default, the value is 10.
• selection (boolean) - Determines whether the text should prevent the drag-scroll action. The default value is true.

Default Configuration" The default configuration for the mixin is as follows:

{
    "axis": "both",
    "cls": "dragging",
    "tolerance": 10,
    "selection": true
}

Usage

To use the mixin, apply the esl-drag-to-scroll attribute to your scrollable container element.

<div class="esl-scrollable-content" esl-drag-to-scroll>
  <!-- Content here -->
</div>

You can also provide custom configuration through the JSON attribute. For example, to enable horizontal scrolling only, disable text selection, and use a custom class is-dragging during the drag.

<div class="esl-scrollable-content" esl-drag-to-scroll="{axis: 'x', cls: 'is-dragging', selection: false}">
  <!-- Content here -->
</div>