JGUI源码 鼠标中键滚动再次优化

Posted 2021-02-11 zhaogaojian

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