视差滚动效果变慢

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

您遇到的延迟是由于两个主要因素。

[页面处于打开状态时，会触发大量的Scroll事件滚动
1. JavaScript实现主要是单一的线程化。

我们该怎么做才能解决这些问题？

为了解决第一个问题，您可以debounce或throttle onscroll回调函数。这是有关这些技术的simple but good write。

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

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

重写您的实现，

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

$(window).on('scroll', function() {
  setTimeout(scrollHandler, 4)
});