This controller can be attached to any element that overflows in one or both directions, allowing the user to scroll by clicking and dragging within the content.
IMPORTANT: Always bind the controller to the scrollable element itself, not to the overflowed content.
IMPORTANT: Restricting scrolling to a single axis does not prevent drag scrolling on mobile devices.
<div data-controller="easy-dragscroll" style="width: 50vw; height: 50vh; overflow: scroll;">
<div style="height: 200vh; width: 200vw; background-color: green;"></div>
</div>Type: String (keyword)
Allowed values: 'x', 'y', 'both'.
Determines which scroll axis is enabled for dragging:
- 'x' enables only horizontal drag-scroll.
- 'y' enables only vertical drag-scroll.
- 'both' enables both axes.
Default: 'both'
<div data-controller="easy-dragscroll" data-easy-dragscroll-axis-value="y" style="width: 50vw; height: 50vh; overflow: scroll;">
<div style="height: 200vh; width: 200vw; background-color: green;"></div>
</div>This enables the drag scroll just on the y-axis.