视差滚动效果变得滞后

Question

我写了一个脚本，基本上给topper元素一个负边距底部， 所以它使它下面的元素上升，它有点像卷轴一样的视差，我的问题是我把函数写成一个滚动，我认为函数运行得太多了，以至于它使页面有点滞后，这是我的代码，我希望你们能帮助我。

$(window).on('scroll', function () {
if (scrollY >= 100) {
$("#gallery").css("margin-bottom", -((scrollY - 100) / 4));
}
});

Answer 1

首先，每次触发滚动事件时都会重新查询 DOM。我将首先在事件处理程序外部缓存选择器。

var $gallery = $("#gallery");
$(window).on('scroll', function () {
if (scrollY >= 100) {
$gallery.css("margin-bottom", -((scrollY - 100) / 4));
}
});

然后，您可能想要将 DOM 操作包装在 setTimeout 中。

var $gallery = $("#gallery");
var delay;
$(window).on('scroll', function () {
delay = setTimeout(function() {
if (scrollY >= 100) {
$gallery.css("margin-bottom", -((scrollY - 100) / 4));
}
}, 50);
});

编辑： 要检测滚动方向，请尝试以下操作：

var $gallery = $("#gallery");
var delay;
var lastScrollTop = 0;
$(window).scroll(function(event){
var scrollPos = $(this).scrollTop();
delay = setTimeout(function() {
if (scrollPos > lastScrollTop){
if (scrollY >= 100) {
$gallery.css("margin-bottom", -((scrollY - 100) / 4));
}
} else {
if (scrollY < 100) {
$gallery.css("margin-bottom", -((scrollY + 100) / 4));
}
}
}, 50);
lastScrollTop = st;
});

Answer 2

您遇到的滞后是由于两个主要因素造成的。

当页面被触发时，会

1. 触发大量滚动事件 滚动
2. Javascript实现主要是单一的 螺纹。

我们能做些什么来解决这些问题？

若要修复第一个问题，可以debounce或throttleonscroll回调函数。这是一篇关于这些技术的简单但很好的文章。

要解决第二个问题，就是让单线程也有时间执行其他任务。如果您最终使用debounce或throttle，它应该会有所帮助，或者您可以依靠浏览器 eventloop。

基本上，这个想法是告诉浏览器Hey, this is something I want you to do, but take your time.最简单的方法是使用 webapisetTimeout。

重写你的实现，

var gallery = $("#gallery");
var scrollHandler = function() {
if (scrollY >= 100) {
gallery.css("margin-bottom", -((scrollY - 100) / 4));
}
}
$(window).on('scroll', function() {
setTimeout(scrollHandler, 4)
});