Purpose: The UI responds to the scrolling up or down of the screen.
Initial implementation:
1 var scrollfunc = function (e) {2 3 var DATA = 0; 4 E = E | window. event; 5 If (E. wheeldelta) {// IE/Opera/chrome 6 data = E. wheeldelta; 7} else if (E. detail) {// Firefox 8 Data = E. detail; 9} 10 CB & CB (data); 11} 12/* Registration event */13 if (document. addeventlistener) {14 document. addeventlistener ('domainscroll', scrollfunc, false); 15} 16 window. onmousewheel = document. onmousewheel = scrollfunc; // IE/Opera/Chrome/Safari
In the PC browser, you can obtain the rolling direction.
However, there is a bug: when you enter the page, the first rolling operation is an event that cannot be triggered when you scroll down.
However, this is only on the PC end, but on the mobile phone end, we need to find another way:
1 var SX = Sy = EX = ey = 0; 2 function touchfun (event) {3 event = event | window. event; 4 event. preventdefault (); 5 VaR _ DATA = _ gettouchpointer (event); 6 7 switch (event. type) {8 case 'touchstart': 9 SX = _ data. x; 10 Sy = _ data. y; 11 break; 12 case 'touchmove ': 13 EX = _ data. x; 14 ey = _ data. y; 15 // alert (':' + Ex + 'ey: '+ ey); 16 break; 17 case 'touchend': 18 var A = SX-ex, 19 B = sy-ey, 20 Data = {'rollx': A, 'scrolil': B}; 21 if (B> 0 & math. ABS (B)> math. ABS (A) {22 data. point = 'up'; 23} else if (B <0 & math. ABS (B)> math. ABS (A) {24 data. point = 'lowdown '; 25} else if (a <0 & math. ABS (a)> math. ABS (B) {26 data. point = 'right'; 27} else if (a> 0 & math. ABS (a)> math. ABS (B) {28 data. point = 'left'; 29} 30 CB & CB (data); 31 break; 32} 33} 34 35/* Get coordinates */36 function _ gettouchpointer (Event) {37 var touchx = 0, 38 touchy = 0; 39 // If the element has only one finger, 40 if (event.tar gettouches. length = 1) {41 var touch = event.tar gettouches [0]; 42 touchx = touch. pagex; 43 touchy = touch. pagey; 44} 45 return {'X': touchx, 'y': Touchy}; 46} 47 48 el. addeventlistener ('touchstart', touchfun, false); 49 el. addeventlistener ('touchmove ', touchfun, false); 50 el. addeventlistener ('touchend', touchfun, false );
The code is rough and not elegant.
Monitor scroll wheel direction