JQuery 视差效果。 OnScroll 事件非常滞后答案

【问题标题】：JQuery Parallax effect. OnScroll event very LaggyJQuery 视差效果。 OnScroll 事件非常滞后
【发布时间】：2017-08-19 01:24:21
【问题描述】：

我正在尝试在js中制作一个简单的视差效果。

这是我的代码：

function parallax(){
    $(".parallax").css("backgroundPosition","50% "+$(document).scrollTop()+"px");
}
parallax();
$(window).scroll(function() {
    parallax();
});

https://jsfiddle.net/makitos666/whb6Ldup/3/

它功能齐全，但我遇到了性能问题。当我用鼠标滚轮滚动时，有 100px 的步长，一切正常。但是当我使用可触摸输入时，比如触摸板或智能手机，精度要高得多，并且会多次触发滚动事件。在我的笔记本电脑上一切正常，但如果您使用速度较慢的计算机或 Android 手机，效果会非常滞后。

你知道这是否可能吗？还是我需要改变一切？

或者如果你知道一些响应式和移动友好的库来实现这种效果，我也很感兴趣。

非常感谢！

【问题讨论】：

标签： javascript jquery performance parallax effect

【解决方案1】：

好吧，经过我自己几个小时的调查，这是我的结论：

JS OnScroll 事件不是制作响应式视差效果的最佳方式，这只适用于专用显卡，而且这不是响应式（对我而言）。

解决方案是这样的：https://codepen.io/keithclark/pen/JycFw (by keithclark)

.slide {
  position: relative;
  padding: 25vh 10%;
  width: 100%;
  height: 100%;
}
#slide1:before {
  background-image: url("http://lorempixel.com/640/480/abstract/4/");
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}

#slide2 {
  background-image: url("http://lorempixel.com/640/480/abstract/3/");
  background-attachment: fixed;
}

纯 CSS 视差效果。和我的一样，但更有效。如果您知道另一种解决方案，我想知道！ ;)

更新

好吧，这个解决方案有效，但似乎 backbround-attachment: fixed 在 Android 手机中效果不佳。仍在寻找解决方案。

【讨论】：