改善平板电脑和移动设备上的视差滚动答案

【问题标题】：Improve parallax scrolling on tablets and mobile改善平板电脑和移动设备上的视差滚动
【发布时间】：2017-04-17 18:30:03
【问题描述】：

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

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

做到这一点我使用以下方法：

window.requestAnimationFrame = window.requestAnimationFrame
  || window.mozRequestAnimationFrame
  || window.webkitRequestAnimationFrame
  || window.msRequestAnimationFrame
  || function(f){setTimeout(f, 1000/60)}

var hero = document.getElementsByClassName('hero');

function parallax(){
  var scrolltop = window.pageYOffset;
  hero[0].style.backgroundPosition = '25% ' + (+scrolltop * .5 - 217) + 'px';
}

window.addEventListener('scroll', function(){

  requestAnimationFrame(parallax);
  
}, false)

.hero{

	padding: 140px 0px;

	background-image: url("https://s-media-cache-ak0.pinimg.com/originals/0e/18/3b/0e183b91a011639bfed7ebfd6a1f7063.jpg");
	background-repeat: no-repeat;
	background-position: 25% -217px;
	background-size: cover; 
}

.paddingTop{
  padding: 50px 0;
}
.paddingBottom{
  padding: 800px 0;
}

<div class='paddingTop'>
</div>

<div class="hero">
</div>

<div class='paddingBottom'>
</div>

在台式机上这很好，但问题始于平板电脑和移动设备。此类设备上的结果可能会变得非常不稳定和/或在滚动网站时动画完全滞后。

这个问题似乎并不适用于所有移动浏览器。

这是一个小报告：

移动 Android 上的互联网 - 不稳定
移动 Android 上的 Firefox - 非常不稳定
移动 Android 上的 Chrome - 非常流畅，没有问题
Android 平板电脑上的 Firefox - 波动没有那么严重移动对应
Android 平板电脑上的 Chrome - 不稳定
Android 平板电脑上的三星上网 - 非常不稳定
iOS 上的 Safari - 非常流畅

【问题讨论】：

标签： javascript android css mobile parallax

【解决方案1】：

视差滚动在移动设备中是出了名的棘手。

从历史上看，javascript 解决方案在移动设备中存在问题，因为 onscroll 事件是 fired when the page stops scrolling。

您可以尝试https://developers.google.com/web/updates/2016/12/performant-parallaxing 中描述的这种很有前途的 CSS 驱动解决方案：

这种方法的 CSS 如下所示：

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

假设 HTML 的 sn-p 如下：

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

但是，如链接中所述，该技术目前也存在缺陷 - 特别是在 Mobile Safari 中。

【讨论】：