Javascript 改善平板电脑和手机上的视差滚动

我有一个关于视差滚动效果的问题，我在一个网站上的英雄封面上，我正在工作

所以我想让英雄封面上的背景图像以比整个网站慢的速度滚动

为此，我使用以下方法：

window.requestAnimationFrame=window.requestAnimationFrame
||window.mozRequestAnimationFrame
||window.webkitRequestAnimationFrame
||window.msRequestAnimationFrame
||函数（f）{setTimeout（f，1000/60）}
var hero=document.getElementsByClassName（'hero'）；
函数视差（）{
var scrolltop=window.pageYOffset；
hero[0].style.backgroundPosition='25%'+（+scrolltop*.5-217）+'px'；
}
addEventListener（'scroll'，function（）{
请求动画帧（视差）；
}，false）

.hero{
填充：140px 0px；
背景图像：url（“https://s-media-cache-ak0.pinimg.com/originals/0e/18/3b/0e183b91a011639bfed7ebfd6a1f7063.jpg");
背景重复：无重复；
背景位置：25%-217px；
背景尺寸：封面；
}
帕丁顿先生{
填充：50px0；
}
.填鸭{
填充：800px0；
}

---

众所周知，视差滚动在移动设备中非常棘手

从历史上看，javascript解决方案在移动应用中一直存在问题，因为

onscroll

事件被忽略

您可以尝试以下介绍的有前途的CSS驱动解决方案：

这种方法的CSS如下所示：

它假设一段HTML，如下所示：

然而，正如链接中所指出的，这种技术目前也存在缺陷——特别是在移动狩猎中

.container {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 1px;
  perspective-origin: 0 0;
}

.parallax-child {
  transform-origin: 0 0;
  transform: translateZ(-2px) scale(3);
}

<div class="container”>
  <div class="parallax-child”></div>
</div>