默认自动上滚,当鼠标移入后,停止滚动;鼠标移除,又恢复自动滚动;鼠标移入后,绑定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 })();