@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

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

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!

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 ).

copy

Happy dragging! 👨‍💻

Edit this page on GitHub