@svelte-put/dragscroll
action to add "drag-to-scroll" behavior
Installation
terminal
npm install --save-dev @svelte-put/dragscroll
Action Usage Notice
As with any svelte action
, dragscroll
should be use with
element
and not component
.
use:action is an element directive
<-- correct usage-->
<div use:dragscroll />
<-- incorrect usage-->
<Component use:dragscroll />
Quick Start
quick start
<script>
import { dragscroll } from '@svelte-put/dragscroll';
</script>
<div use:dragscroll>...</div>
Default, no parameters: drag to scroll horizontally
quick start demo
Customization
Specifying the Scroll Axis
dragscroll
supports both axes. You can specifying the scrolling axis or both with
the axis
parameter. By default, axis
is set to x
.
scroll axis
<div use:dragscroll={{ axis: 'x' }}>...</div>
<div use:dragscroll={{ axis: 'y' }}>...</div>
<div use:dragscroll={{ axis: 'both' }}>...</div>
Select the scroll axis
scroll axis demo
mouse
vs pointer
By default, dragscroll
assumes
PointerEvent
(
pointerup
, pointerdown
, pointermove
,
pointerleave
). You can switch to
MouseEvent
equivalents by specifying the event
parameter.
mouse vs pointer
<div use:dragscroll={{ event: 'pointer' }}>...</div>
<div use:dragscroll={{ event: 'mouse' }}>...</div>
Disabling Cursor Handling
By default, dragscroll
adds cursor: grab
, and
cursor: grabbing
on mousedown
. This can be disabled by setting the
cursor
parameter to false
(default to true
).
cursor parameter
div use:dragscroll={{ cursor: false }}>...</div>
Limitation
There is known issue when using
scroll-snap-align
, where view tends to be unresponsive to dragscroll
and requires a great
mousemove
length to snap to the next box.
Below, try using scrollbar to confirm snap-align is working as expected. Then try dragging with mouse, notice that it only works when dragged over almost the entire width of the box.
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Limitation with scroll-snap
Here is the source code
for dragscroll
. Feel free to open a PR if you've found a workaround for this.
Thanks!
API Reference
The best documentation is no documentation!
It is recommended to utilize editor intellisense & explore in-code documentation while using the package (and use typescript if possible 😉) .
See the extracted API Reference on github.
API extraction is powered by @microsoft/api-extractor and @microsoft/api-documenter ).

Happy dragging! 👨💻