1
- /* eslint-disable */
2
-
3
- import * as CSS from '../lib/css' ;
4
- import * as DOM from '../lib/dom' ;
5
1
import cls , { addScrollingClass , removeScrollingClass } from '../lib/class-names' ;
6
2
import updateGeometry from '../update-geometry' ;
7
- import { toInt } from '../lib/util' ;
8
3
9
- export default function ( i ) {
10
- bindMouseScrollHandler ( i , [
11
- 'containerWidth' ,
12
- 'contentWidth' ,
13
- 'pageX' ,
14
- 'railXWidth' ,
15
- 'scrollbarX' ,
16
- 'scrollbarXWidth' ,
17
- 'scrollLeft' ,
18
- 'x' ,
19
- 'scrollbarXRail' ,
20
- ] ) ;
4
+ let activeSlider = null ; // Variable to track the currently active slider
5
+
6
+ export default function setupScrollHandlers ( i ) {
21
7
bindMouseScrollHandler ( i , [
22
8
'containerHeight' ,
23
9
'contentHeight' ,
@@ -29,70 +15,96 @@ export default function (i) {
29
15
'y' ,
30
16
'scrollbarYRail' ,
31
17
] ) ;
18
+
19
+ bindMouseScrollHandler ( i , [
20
+ 'containerWidth' ,
21
+ 'contentWidth' ,
22
+ 'pageX' ,
23
+ 'railXWidth' ,
24
+ 'scrollbarX' ,
25
+ 'scrollbarXWidth' ,
26
+ 'scrollLeft' ,
27
+ 'x' ,
28
+ 'scrollbarXRail' ,
29
+ ] ) ;
32
30
}
33
31
34
32
function bindMouseScrollHandler (
35
33
i ,
36
34
[
37
- containerHeight ,
38
- contentHeight ,
39
- pageY ,
40
- railYHeight ,
41
- scrollbarY ,
42
- scrollbarYHeight ,
43
- scrollTop ,
44
- y ,
45
- scrollbarYRail ,
35
+ containerDimension ,
36
+ contentDimension ,
37
+ pageAxis ,
38
+ railDimension ,
39
+ scrollbarAxis ,
40
+ scrollbarDimension ,
41
+ scrollAxis ,
42
+ axis ,
43
+ scrollbarRail ,
46
44
]
47
45
) {
48
46
const element = i . element ;
49
-
50
- let startingScrollTop = null ;
51
- let startingMousePageY = null ;
47
+ let startingScrollPosition = null ;
48
+ let startingMousePagePosition = null ;
52
49
let scrollBy = null ;
53
50
54
- function mouseMoveHandler ( e ) {
51
+ function moveHandler ( e ) {
55
52
if ( e . touches && e . touches [ 0 ] ) {
56
- e [ pageY ] = e . touches [ 0 ] . pageY ;
53
+ e [ pageAxis ] = e . touches [ 0 ] [ `page ${ axis . toUpperCase ( ) } ` ] ;
57
54
}
58
- element [ scrollTop ] = startingScrollTop + scrollBy * ( e [ pageY ] - startingMousePageY ) ;
59
- addScrollingClass ( i , y ) ;
60
- updateGeometry ( i ) ;
61
55
62
- e . stopPropagation ( ) ;
63
- e . preventDefault ( ) ;
56
+ // Only move if the active slider is the one we started with
57
+ if ( activeSlider === scrollbarAxis ) {
58
+ element [ scrollAxis ] =
59
+ startingScrollPosition + scrollBy * ( e [ pageAxis ] - startingMousePagePosition ) ;
60
+ addScrollingClass ( i , axis ) ;
61
+ updateGeometry ( i ) ;
62
+
63
+ e . stopPropagation ( ) ;
64
+ e . preventDefault ( ) ;
65
+ }
64
66
}
65
67
66
- function mouseUpHandler ( ) {
67
- removeScrollingClass ( i , y ) ;
68
- i [ scrollbarYRail ] . classList . remove ( cls . state . clicking ) ;
69
- i . event . unbind ( i . ownerDocument , 'mousemove' , mouseMoveHandler ) ;
68
+ function endHandler ( ) {
69
+ removeScrollingClass ( i , axis ) ;
70
+ i [ scrollbarRail ] . classList . remove ( cls . state . clicking ) ;
71
+ document . removeEventListener ( 'mousemove' , moveHandler ) ;
72
+ document . removeEventListener ( 'mouseup' , endHandler ) ;
73
+ document . removeEventListener ( 'touchmove' , moveHandler ) ;
74
+ document . removeEventListener ( 'touchend' , endHandler ) ;
75
+ activeSlider = null ; // Reset active slider when interaction ends
70
76
}
71
77
72
- function bindMoves ( e , touchMode ) {
73
- startingScrollTop = element [ scrollTop ] ;
74
- if ( touchMode && e . touches ) {
75
- e [ pageY ] = e . touches [ 0 ] . pageY ;
76
- }
77
- startingMousePageY = e [ pageY ] ;
78
- scrollBy = ( i [ contentHeight ] - i [ containerHeight ] ) / ( i [ railYHeight ] - i [ scrollbarYHeight ] ) ;
79
- if ( ! touchMode ) {
80
- i . event . bind ( i . ownerDocument , 'mousemove' , mouseMoveHandler ) ;
81
- i . event . once ( i . ownerDocument , 'mouseup' , mouseUpHandler ) ;
82
- e . preventDefault ( ) ;
83
- } else {
84
- i . event . bind ( i . ownerDocument , 'touchmove' , mouseMoveHandler ) ;
85
- }
78
+ function bindMoves ( e ) {
79
+ if ( activeSlider === null ) {
80
+ // Only bind if no slider is currently active
81
+ activeSlider = scrollbarAxis ; // Set current slider as active
82
+
83
+ startingScrollPosition = element [ scrollAxis ] ;
84
+ if ( e . touches ) {
85
+ e [ pageAxis ] = e . touches [ 0 ] [ `page${ axis . toUpperCase ( ) } ` ] ;
86
+ }
87
+ startingMousePagePosition = e [ pageAxis ] ;
88
+ scrollBy =
89
+ ( i [ contentDimension ] - i [ containerDimension ] ) / ( i [ railDimension ] - i [ scrollbarDimension ] ) ;
86
90
87
- i [ scrollbarYRail ] . classList . add ( cls . state . clicking ) ;
91
+ if ( ! e . touches ) {
92
+ document . addEventListener ( 'mousemove' , moveHandler ) ;
93
+ document . addEventListener ( 'mouseup' , endHandler ) ;
94
+ } else {
95
+ document . addEventListener ( 'touchmove' , moveHandler , { passive : false } ) ;
96
+ document . addEventListener ( 'touchend' , endHandler ) ;
97
+ }
98
+
99
+ i [ scrollbarRail ] . classList . add ( cls . state . clicking ) ;
100
+ }
88
101
89
102
e . stopPropagation ( ) ;
103
+ if ( e . cancelable ) {
104
+ e . preventDefault ( ) ;
105
+ }
90
106
}
91
107
92
- i . event . bind ( i [ scrollbarY ] , 'mousedown' , ( e ) => {
93
- bindMoves ( e ) ;
94
- } ) ;
95
- i . event . bind ( i [ scrollbarY ] , 'touchstart' , ( e ) => {
96
- bindMoves ( e , true ) ;
97
- } ) ;
108
+ i [ scrollbarAxis ] . addEventListener ( 'mousedown' , bindMoves ) ;
109
+ i [ scrollbarAxis ] . addEventListener ( 'touchstart' , bindMoves ) ;
98
110
}
0 commit comments