drag-scroll

Basic usage

The most common, basic usage of drag-scroll.
Drag the image below to scroll its parent container.

code

Separate element and container

It's not necessary to make corresponding scrollable container exactly the draggable element's parent.
For the example below, use the grey "touchpad" to scroll the container.

code

Movement

With option movement, you can define how the dragscroll movement will be.

Lock axis

Dragscroll behavior will only take place on x-axis, y-axis, or both (will not scroll at all).

Lock x-axis.

Lock y-axis.

code

Reverse scroll direction

Reverse scroll direction along x-axis, y-axis, or both.

Reverse x-axis.

Reverse y-axis.

Reverse both x-axis and y-axis.

code

Swap controls

Horizontal drag will effect vertical scroll, and vice versa.

code

Constrained

Dragscroll can only happen when cursor is inside the scrollable container.

code

Sensitivity

To accurately define dragscroll's sensitivity, scale the ratio of drag_trigger_threshold to scroll_respond_vector.

Normal: For the example below, 1px drag triggers 1px scroll.

1234567891011121314151617181920

Less sensitive: For the example below, 5px drag triggers 1px scroll.

1234567891011121314151617181920

More sensitive: For the example below, 1px drag triggers 5px scroll.

1234567891011121314151617181920

Scaled sensitive: For the example below, 10px drag triggers 10px scroll.

1234567891011121314151617181920

code

Modify state

Update, disable or destroy an existing dragscroll.

code

Avoidance

Dragscroll won't take effect on those elements assigned as avoids.

For the example below, order number divs are avoided.

012345678910111213141516171819

code

Example - A dragscrollable sticky table

Drag the table head to scroll table horizontally.
Drag the first column to scroll table vertically.

The sticky capability is carried by stick-element.

row_n 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

age sex bmi children smoker region charges 19 female 27.9 0 yes southwest 16884.924 18 male 33.77 1 no southeast 1725.5523 28 male 33 3 no southeast 4449.462 33 male 22.705 0 no northwest 21984.47061 32 male 28.88 0 no northwest 3866.8552 31 female 25.74 0 no southeast 3756.6216 46 female 33.44 1 no southeast 8240.5896 37 female 27.74 3 no northwest 7281.5056 37 male 29.83 2 no northeast 6406.4107 60 female 25.84 0 no northwest 28923.13692 25 male 26.22 0 no northeast 2721.3208 62 female 26.29 0 yes southeast 27808.7251 23 male 34.4 0 no southwest 1826.843 56 female 39.82 0 no southeast 11090.7178 27 male 42.13 0 yes southeast 39611.7577 19 male 24.6 1 no southwest 1837.237 52 female 30.78 1 no northeast 10797.3362 23 male 23.845 0 no northeast 2395.17155 56 male 40.3 0 no southwest 10602.385 30 male 35.3 0 yes southwest 36837.467 60 female 36.005 0 no northeast 13228.84695 30 female 32.4 1 no southwest 4149.736 18 male 34.1 0 no southeast 1137.011 34 female 31.92 1 yes northeast 37701.8768 37 male 28.025 2 no northwest 6203.90175 59 female 27.72 3 no southeast 14001.1338 63 female 23.085 0 no northeast 14451.83515 55 female 32.775 2 no northwest 12268.63225 23 male 17.385 1 no northwest 2775.19215 31 male 36.3 2 yes southwest 38711 22 male 35.6 0 yes southwest 35585.576 18 female 26.315 0 no northeast 2198.18985 19 female 28.6 5 no southwest 4687.797 63 male 28.31 0 no northwest 13770.0979 28 male 36.4 1 yes southwest 51194.55914 19 male 20.425 0 no northwest 1625.43375 62 female 32.965 3 no northwest 15612.19335 26 male 20.8 0 no southwest 2302.3 35 male 36.67 1 yes northeast 39774.2763 60 male 39.9 0 yes southwest 48173.361 24 female 26.6 0 no northeast 3046.062 31 female 36.63 2 no southeast 4949.7587 41 male 21.78 1 no southeast 6272.4772 37 female 30.8 2 no southeast 6313.759 38 male 37.05 1 no northeast 6079.6715 55 male 37.3 0 no southwest 20630.28351 18 female 38.665 2 no northeast 3393.35635 28 female 34.77 0 no northwest 3556.9223 60 female 24.53 0 no southeast 12629.8967 36 male 35.2 1 yes southeast 38709.176 18 female 35.625 0 no northeast 2211.13075 21 female 33.63 2 no northwest 3579.8287 48 male 28 1 yes southwest 23568.272 36 male 34.43 0 yes southeast 37742.5757 40 female 28.69 3 no northwest 8059.6791 58 male 36.955 2 yes northwest 47496.49445 58 female 31.825 2 no northeast 13607.36875 18 male 31.68 2 yes southeast 34303.1672 53 female 22.88 1 yes southeast 23244.7902 34 female 37.335 2 no northwest 5989.52365 43 male 27.36 3 no northeast 8606.2174 25 male 33.66 4 no southeast 4504.6624 64 male 24.7 1 no northwest 30166.61817 28 female 25.935 1 no northwest 4133.64165 20 female 22.42 0 yes northwest 14711.7438 19 female 28.9 0 no southwest 1743.214 61 female 39.1 2 no southwest 14235.072 40 male 26.315 1 no northwest 6389.37785 40 female 36.19 0 no southeast 5920.1041 28 male 23.98 3 yes southeast 17663.1442 27 female 24.75 0 yes southeast 16577.7795 31 male 28.5 5 no northeast 6799.458 53 female 28.1 3 no southwest 11741.726 58 male 32.01 1 no southeast 11946.6259 44 male 27.4 2 no southwest 7726.854 57 male 34.01 0 no northwest 11356.6609 29 female 29.59 1 no southeast 3947.4131 21 male 35.53 0 no southeast 1532.4697 22 female 39.805 0 no northeast 2755.02095 41 female 32.965 0 no northwest 6571.02435 31 male 26.885 1 no northeast 4441.21315 45 female 38.285 0 no northeast 7935.29115 22 male 37.62 1 yes southeast 37165.1638 48 female 41.23 4 no northwest 11033.6617 37 female 34.8 2 yes southwest 39836.519 45 male 22.895 2 yes northwest 21098.55405 57 female 31.16 0 yes northwest 43578.9394 56 female 27.2 0 no southwest 11073.176 46 female 27.74 0 no northwest 8026.6666 55 female 26.98 0 no northwest 11082.5772 21 female 39.49 0 no southeast 2026.9741 53 female 24.795 1 no northwest 10942.13205 59 male 29.83 3 yes northeast 30184.9367 35 male 34.77 2 no northwest 5729.0053 64 female 31.3 2 yes southwest 47291.055 28 female 37.62 1 no southeast 3766.8838 54 female 30.8 3 no southwest 12105.32 55 male 38.28 0 no southeast 10226.2842 56 male 19.95 0 yes northeast 22412.6485 38 male 19.3 0 yes southwest 15820.699

code