JGUI源码:鼠标中键滚动再次优化(5)

//电脑端中键滚动事件
var mousewheel =
  getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$(".jgui-accordion").on(mousewheel, function(event) {
  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;
    datas._startmousewheeldatetime = new Date().valueOf();
    var obj = $(this);
    var handle = function() {
      var step = Math.floor(obj.height() / 10); //可视区高度
      var cur_top = obj.scrollTop(); //当前滚过的高度
      if (new Date().valueOf() - datas._startmousewheeldatetime > 100 && datas._sumdelta != 0) {
        //100ms内没有移动滚轮
        direction = datas._sumdelta;
        datas._sumdelta = 0;
        obj.stop().animate(
          {
            scrollTop: direction * Math.abs(direction) * step + cur_top
          },
          400,
          "linear",
          function() {
            clearInterval(datas._mouseintervalhandle);
            datas._mouseintervalhandle = undefined;
          }
        );
      }
    };
    if (datas._mouseintervalhandle == undefined) {
      datas._mouseintervalhandle = setInterval(handle, 10);
    }
  }
  stopPropagation(event);
});

之前文章:
JGUI源码:Accordion鼠标中键滚动和手机端滑动实现
https://www.cnblogs.com/zhaogaojian/p/10421950.html
之前代码有时候会卡一下,现在将之前的Timer实现方式改成Interval,判断中键间隔事件内没有滚动后再做animate,响应度提升了一个档次。
演示地址:www.jgui.com

posted @ 2019-02-26 11:34  zhaogaojian  阅读(309)  评论(0编辑  收藏  举报