Javascript 视差滚动效果变慢_Javascript_Html_Css_Scroll_Parallax

Javascript 视差滚动效果变慢

javascript html css scroll

Javascript 视差滚动效果变慢,javascript,html,css,scroll,parallax,Javascript,Html,Css,Scroll,Parallax,我写了一个脚本，基本上给topper元素一个负边距底部，它使下面的元素向上移动，形成了一个类似视差的卷轴，我的问题是我把这个函数写成了一个卷轴，我觉得这个函数运行得太快了，以至于页面有点滞后，这是我的代码，希望你们能帮我 $(window).on('scroll', function () { if (scrollY >= 100) { $("#gallery").css("margin-bottom", -((scrollY - 100) / 4));

我写了一个脚本，基本上给topper元素一个负边距底部，它使下面的元素向上移动，形成了一个类似视差的卷轴，我的问题是我把这个函数写成了一个卷轴，我觉得这个函数运行得太快了，以至于页面有点滞后，这是我的代码，希望你们能帮我

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

});

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

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

然后，您可能希望在setTimeout中包装DOM操作

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;
});

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

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

然后，您可能希望在setTimeout中包装DOM操作

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;
});

您所经历的滞后是由两个主要因素造成的

打开页面时会触发大量滚动事件滚动 Javascript实现主要是单一的螺纹的。我们能做些什么来解决这些问题

要解决第一个问题，可以对onscroll回调函数进行去抖动或节流。下面是一篇关于这些技术的综述

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

基本上，这个想法是告诉浏览器，嘿，这是我想让你做的事情，但是慢慢来。最简单的方法是使用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)
});