var startmousewheeldatetime = (new Date()).valueOf(); //电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel"; $('.jgui-accordion').on(mousewheel, function (event) { startmousewheel = (new Date()).valueOf() var delta = 0; var direction = 0; if (!event) /* For IE. */ event = window.event; if (event.originalEvent.wheelDelta) { /* IE/Opera. */ delta = event.originalEvent.wheelDelta / 120; } else if (event.originalEvent.detail) { delta = -event.originalEvent.detail / 3; } if (delta) { var datas = $(this).data('datas'); datas.sumdelta += (delta > 0 ? -1 : 1); var obj = $(this); var handle = function () { var step = Math.floor(obj.height() / 10);//可视区高度 var cur_top = obj.scrollTop(); //当前滚过的高度 var curdatetime = (new Date()).valueOf(); if ((curdatetime - startmousewheeldatetime > 500) && (datas.sumdelta != 0)) {//500ms内没有移动滚轮 direction = datas.sumdelta; datas.sumdelta = 0; obj.stop().animate( { scrollTop: direction * Math.abs(direction) * step + cur_top }, 400, 'linear', function () { clearInterval(datas.mouseinterval); datas.mouseinterval = undefined; } ); } } if (datas.mouseinterval == undefined) { datas.mouseinterval = setInterval(handle, 100); } } stopPropagation(event); }); $.fn.jAccordion = function (p_options, p_datas, p_param) { return this.each(function () { var obj = $(this); var datas = $.extend({ sumdelta: 0, mouseinterval: undefined }, p_datas); obj.data('datas', datas); }); }; $(".jgui-accordion").jAccordion();
之前文章:
JGUI源码:Accordion鼠标中键滚动和手机端滑动实现
https://www.cnblogs.com/zhaogaojian/p/10421950.html
之前代码有时候会卡一下,现在将之前的Timer实现方式改成Interval,判断中键滚动后再做animate,响应度提升了一个档次。
演示地址:www.jgui.com