视差滚动效果变得迟钝答案

【问题标题】：parallax scroll effect getting laggy视差滚动效果变得迟钝
【发布时间】：2019-12-31 17:23:47
【问题描述】：

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

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

});

【问题讨论】：

标签： javascript html css scroll parallax

【解决方案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;
});

【讨论】：

谢谢，但我面临的另一个主要问题是当我向上滚动到页面末尾并突然再次向上滚动到顶部时，它似乎不起作用，我的意思是它冻结在你再次滚动它之后它开始工作了，你有什么建议我该如何修复它或其他方式来实现这种滚动效果？
我进行了编辑。我无法对此进行测试。如果需要，考虑添加一个可运行的 sn-p。

【解决方案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)
});

【讨论】：