列表自动滚动效果,若手动滚轮,则是手动滚动效果

默认自动上滚,当鼠标移入后,停止滚动;鼠标移除,又恢复自动滚动;鼠标移入后,绑定mousewheel,可以滚轮手动上下滚动。

 1 //lh---每行列表的高度,speed---滚动的速度,delay---间隔多久滚动一次,marqueeDOM---需要实现这个效果的dom, overflowY--超出部分的高度
 2 export const listAutoScroll = (lh, speed, delay, marqueeObj, overflow_Y) => { 
 3   let p = false;
 4   let t;
 5   let o = marqueeObj;
 6   let overflowY = overflow_Y;
 7   // o.innerHTML += o.innerHTML; // 首尾相接的自动滚动
 8   o.style.marginTop = 0;
 9   
10   //鼠标移入,停止滚动
11   o.onmouseover = function () {
12     p = true;
13     on(o, 'mousewheel', handleMousewheel);
14   }; 
15 
16   //鼠标移出,继续滚动
17   o.onmouseout = function (e) {
18     p = false;
19     off(o, 'mousewheel', handleMousewheel);
20   }; 
21 
22 
23 
24   function start() {
25     t = setInterval(scrolling, speed); //定时器,自动滚动
26     if (!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
27   }
28 
29   function scrolling() {
30     if (parseInt(o.style.marginTop) % lh != 0) {
31       o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
32       if (Math.abs(parseInt(o.style.marginTop)) >= o.scrollHeight) {
33         o.style.marginTop = 0;
34       }
35     } else {
36       clearInterval(t);
37       setTimeout(start, delay);
38     }
39   }
40 
41   function handleMousewheel(event) {
42     const e = event || window.event;
43     e.preventDefault();
44     // p = true;
45     let wheelDeltaY = e.wheelDeltaY || e.detail;
46     let dis = wheelDeltaY / 120; 
47 
48     o.style.marginTop = parseInt(o.style.marginTop) + dis * lh + 'px';
49 
50     if(dis > 0 && parseInt(o.style.marginTop) >= 0) {
51       o.style.marginTop = '0px';
52     }
53     if(dis < 0 && parseInt(o.style.marginTop) <= (-1) * (overflowY)) {
54       o.style.marginTop = `${-1 * overflowY}px`;
55     }
56   }
57 
58   setTimeout(start, delay);
59 };
60 // listAutoScroll(40, 20, 1000, "marqueebox"); // 方法调用
 1 /**
 2  * @description 绑定事件 on(element, event, handler)
 3  */
 4 export const on = (function () {
 5   if (document.addEventListener) {
 6     return function (element, event, handler) {
 7       if (element && event && handler) {
 8         element.addEventListener(event, handler, false);
 9       }
10     };
11   } else {
12     return function (element, event, handler) {
13       if (element && event && handler) {
14         element.attachEvent('on' + event, handler);
15       }
16     };
17   }
18 })();
19 
20 /**
21  * @description 解绑事件 off(element, event, handler)
22  */
23 export const off = (function () {
24   if (document.removeEventListener) {
25     return function (element, event, handler) {
26       if (element && event) {
27         element.removeEventListener(event, handler, false);
28       }
29     };
30   } else {
31     return function (element, event, handler) {
32       if (element && event) {
33         element.detachEvent('on' + event, handler);
34       }
35     };
36   }
37 })();
原文地址:https://www.cnblogs.com/ordinary-yolanda/p/11868062.html