监听得到鼠标滚轮事件触发得时间段 或者是多长得距离时触发。

Question

今天在做鼠标滚动有动画效果，但是发现在去监听鼠标滚轮事件得时候发现 每次触发事件得时候滚动得距离都是不一样得 当然在正常得滚动速度下是正常得，但是一旦滚动过快的时候每次触发得距离就不是相等得了 这让人很苦恼没有办法进行动画开始或者是结束得操作 因为判断得是范围导致在滚动得过程中没有触发就会跳过去，导致事件触发不了。

 // 监听鼠标滚动事件
    $(window).on("mousewheel DOMMouseScroll", function(e) {
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
            (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
        if (delta > 0) {
            // 向上滚
            console.log("wheelup 向上滚", $(window).scrollTop());
            if (Index > 0) {
                Index = Index - 1;
            }
            rollHeightUp(Index)
        } else if (delta < 0) {
            // 向下滚
            console.log("wheeldown向下滚", $(window).scrollTop());
            if ($(document).height() > Index * 66) {
                Index = Index + 1;
            }
            rollHeightDown(Index)
        }
    });

结果这个输出得$(window).scrollTop()得值如图：
这样得值让我在下面判断动画开始得时间上有很大的问题， 有的地方动画还没有触发呢 但是已经走过去了 。 或者能提供一下怎么修改滚轮每次滚动得距离 也是可以得。

Answer 1

你不能控制鼠标距离的问题，但是你能控制页面展示触发顺序，
比如有三个渲染块：a,b,c
你能控制在滑动鼠标事件下，渲染顺序必须是a b c,这样的顺序。
很多手机，pc的大厂官网就是这么些，在某个渲染模块渲染完，无论你多使劲搓鼠标，页面也不会往下走，而是一直渲染当前的信息块。

另一个是更改渲染逻辑，与其监听鼠标不如监听滑动距离。