javascript - 检测用户是否已从顶部滚动

Question

对此的显而易见的答案是简单地将事件附加到滚动事件:

var scrolled = false;

$(window).scroll(function() {
   if($(window).scrollTop() > 0) {
       scrolled = true;
   } else {
       scrolled = false;
   }
});

然而，jQuery 的创建者， John Resig's blogpost from 2011状态: 将处理程序附加到窗口滚动事件是一个非常非常糟糕的主意。

并推荐以下内容:

var didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        // Check your page position
    }
}, 250);

过去五年有什么变化吗？ John Resig 的解决方案仍然是最好的吗？

Answer 1

我不想与 jQuery 的创建者争论，但拥有聪明的头脑并不一定意味着你当然总是对的。在滚动上使用延迟可能会破坏基于事件的任何动画。我花了大量时间研究滚动事件并基于它制作插件和演示，这似乎有点像一个城市神话，它经常触发大多数设备。

这是一个测试数量的小演示 ​​- 最大值似乎是显示刷新率:

Codepen

除非浏览器启用了平滑滚动，否则鼠标滚轮或平移只会导致触发单个事件。即使情况并非如此，大多数机器都配备精良，可以在帧速率允许的范围内处理尽可能多的调用 - 前提是网页的其余部分构建良好。

最后一点是最大的问题，浏览器可以在很小的时间间隔内处理相当多的脚本，但最能减慢执行速度的是编写糟糕的标记。因此，最大的瓶颈往往是重绘。使用开发人员工具时可以很好地检查这一点。

一些例子是有大块的固定位置元素和动画不是基于 transform但改用像素值。两者都会触发不必要的重绘，这对性能有巨大的影响。这些问题与滚动触发的频率没有直接关系。

使用固定位置元素，可以通过以下 hack 防止在 webkit 相关浏览器上重绘:

.fixed {
  -webkit-backface-visibility: hidden;
}

这会创建一个单独的堆叠顺序，使内容与其周围环境无关并防止整个页面被重新绘制。 Firefox 似乎默认执行此操作，但不幸的是，我还没有找到可以与 IE 一起使用的属性，因此最好在任何情况下都避免使用这些类型的元素，尤其是当它们的大小占视口(viewport)的很大一部分时。

在撰写上述文章时，以下内容尚未实现。

那将是 requestAnimationFrame现在有很好的浏览器支持。有了这个，功能可以以一种不受浏览器强制的方式执行。因此，如果滚动处理程序中有复杂的函数，那么使用它会是一个很好的主意。

另一个优化是使用标记，除非需要，否则不运行任何东西。一个有用的工具可以是添加类并检查它们的存在。这是我通常使用的方法:

$(function() {

var flag, modern = window.requestAnimationFrame;

$(window).scroll(function() {

    if (!$(this).scrollTop()) {

        if (flag) {
        if (modern) requestAnimationFrame(doSomething);
        else doSomething();
        flag = false;
        }
    }
    else if (!flag) {

        if (modern) requestAnimationFrame(doMore);
        else doMore();
        flag = true;
    }
});

function doSomething() {

    // special magic
}

function doMore() {

    // other shenanigans
}
});

以及如何使用切换类来确定 bool 值的示例:

$(function() {

var modern = window.requestAnimationFrame;

$(window).scroll(function() {

    var flag = $('#element').hasClass('myclass');

    if (!$(this).scrollTop()) {

        if (flag) {
        if (modern) requestAnimationFrame(doSomething);
        else doSomething();
        $('#element').removeClass('myclass');
        }
    }
    else if (!flag) {

        if (modern) requestAnimationFrame(doMore);
        else doMore();
        $('#element').addClass('myclass');
    }
});

function doSomething() {

    // special magic
}

function doMore() {

    // other shenanigans
}
});

如果它不会干扰任何所需的功能，那么消除事件当然是一个很好的方法。它可以很简单:

$(function() {

var doit, modern = window.requestAnimationFrame;

$(window).scroll(function() {

    clearTimeout(doit);

    doit = setTimeout(function() {

        if (modern) requestAnimationFrame(doSomething);
        else doSomething();

    }, 50);
});

function doSomething() {

    // stuff going on
}
});

在下面的评论中，Kaiido 有一些有效的观点。除了必须提高定义超时的变量的范围之外，这种方法在实践中可能不太有用，因为它只会在滚动完成后执行一个函数。我想引用 this interesting article ，得出的结论是，这里比去抖动更有效的是节流 - 确保事件仅在每个时间单位运行函数的最大量，更接近问题中提出的内容。 Ben Alman 制造 a nice little plugin为此(请注意，它已经在 2010 年编写了)。

Example

我设法只提取了节流所需的部分，它仍然可以以类似的方式使用:

$(window).scroll($.restrain(50, someFunction));

其中第一个参数是只有一个事件将执行第二个参数 - 回调函数的时间量。这是底层代码:

(function(window, undefined) {

var $ = window.jQuery;

$.restrain = function(delay, callback) {

    var executed = 0;

    function moduleWrap() {

        var elapsed = Date.now()-executed;

        function runIt() {

            executed = Date.now();
            callback.apply(this, arguments);
        }

        if (elapsed > delay) runIt();
    }

    return moduleWrap;
};
})(this);

当然，要执行的函数内部会发生什么仍然会减慢进程。应该始终避免的一个例子是使用 .css()设置样式并将任何计算放入其中。这对性能非常不利。

还必须提到的是，在页面下方的某个点而不是顶部切换时，标记代码更有意义，因为该位置不会多次触发。因此，问题范围内可能会忽略对标志本身的检查。

正确执行此操作，还可以检查页面加载时的滚动位置并在此基础上进行切换。 Opera 对此特别顽固——它在页面加载后恢复缓存位置。所以小超时最适合:

$(window).on('load', function() {

    setTimeout(function() {

        // check scroll position and set flag

    }, 20);
});

一般来说，我会说 - 不要避免使用滚动事件，它可以在网页上提供非常好的效果。只是要警惕这一切是如何结合在一起的。