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

Question

我在我正在研究的网站上对英雄封面具有视差滚动效果有一个问题。

所以我想以比整个网站慢的英雄封面上的背景图像制作背景图像。

确实实现了这一目标，我使用以下方法：

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 -phoppy
• Android平板电脑上的三星互联网 - 极度波动
• iOS上的野生动物园 - 完美平滑

Answer 1

视差滚动在移动设备中很棘手。

从历史上看，JavaScript解决方案在移动设备中存在问题，因为onscroll事件是在Page 停止滚动时发射的。

您可以尝试使用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的摘要如下：

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

但是，如链接中所述，该技术当前也有陷阱 - 尤其是在移动野生动物园中。