@svelte-put/dragscroll GitHub

action to add "drag-to-scroll" behavior

@svelte-put/dragscroll @svelte-put/dragscroll @svelte-put/dragscroll changelog

Installation

terminal

npm install --save-dev @svelte-put/dragscroll

Quick Start

quick start

<script>
  import { dragscroll } from '@svelte-put/dragscroll';
</script>

<div use:dragscroll>...</div>

Default, no parameters: drag to scroll horizontally

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

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!

copy

Happy dragging! 👨‍💻

Edit this page on GitHub