视差滚动效果变得迟钝

Question

我写了一个脚本，基本上给顶部元素一个负边距底部，所以它使它下面的元素上升并且它有点像滚动一样产生视差，我的问题是我把这个函数写成一个滚动我认为这个函数运行太多以至于它使页面有点滞后，这是我的代码，希望大家帮帮我。

$(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 事件滚动
Javascript 实现主要是单一的螺纹。

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

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

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

基本上，这个想法是告诉浏览器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)
});

视差滚动效果变得迟钝

parallax scroll effect getting laggy

javascript

html

css

scroll

parallax