用户滚动到页面底部时的性能问题

Question

我有一个固定在页面右下方的按钮；

.btn-this{
 width: 313px;
 height: 61px;
 background-color: #ebb762;
 position: fixed;
 bottom: 0;
 right: 0;
 z-index: 99;
}

所以我想在页面的某个位置滚动后将按钮的位置从“固定”更改为“相对”。

现在，起初我为我完成了这项工作：

JQuery(function ($) {
    var masinfo = $(".btn-this");
    $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 457) {
            masinfo.css('position', 'relative');
        } else {
            masinfo.css({
                position: 'fixed',
                bottom: '0'
            });
        }
    });
});

但是后来我确实看到这不是一个高质量的解决方案，因为我将不得不粘贴并更改每个页面的代码，而且这将永远不会很顺利。

所以我确实检查了这两个帖子：
检查用户是否已滚动到底部

到达父容器底部的“ #sidebar”类时，如何添加“ bottom”类？

但是话又说回来，我无法使其顺利运行，代码可以正常工作，但是执行时间很多，

使用时：

if ($(window).scrollTop() + $(window).height() > $(document).height() - 78) {
    console.log('bottom');
} 

控制台记录“底部” 11次；

我试过使用去抖器，但是我只是不理解这个概念，或者只是没有正确地使用它。

有人能做这样的事吗？

Answer 1

我看到3个可能的瓶颈：

1. 全局事件侦听器（$（window）.scroll（））可能会附加多次（可能是如果您拥有SPA，其中导航不会重新加载页面，并且每个新页面都设置了一个处理程序）
2. 滚动事件处理程序发生在每个滚动事件上
3. ...和处理程序冻结页面，直到页面结束-这是被动事件侦听器进行救援的地方。

至于＃2，您通过反跳解决了这个问题，但是最好查看您的代码（关于确切的反跳逻辑）。 您可能以错误的方式进行操作，因此不仅调用了最后一个事件调度处理程序，而且每次都调用（有一些延迟）

至于＃3，jQuery 还不支持它，因此您需要使用低级的addEventListener。

Answer 2

防反跳功能限制了该功能可以触发的速率。 阅读有关反跳功能的更多信息还有另外一种方法可以改善requestAnimationFrame的动画/滚动性能

所以你的函数可以写成

JQuery(function ($) {
    var masinfo = $(".btn-this");
    $(window).scroll(function () {
        // If there's a timer, cancel it
        if (timeout) {
            window.cancelAnimationFrame(timeout);
        }
        // Setup the new requestAnimationFrame()
        timeout = window.requestAnimationFrame(function () {
            if ($(window).scrollTop() + $(window).height() > $(document).height() - 78) {
                console.log('bottom');
            }
        });
    });
});