移动端CSS视差滚动不起作用

Question

我的视差滚动在移动设备上无法正常工作，包括安卓和iOS。代码在桌面端运行良好，但对于移动设备中的任何浏览器均无效。背景图像没有呈现视差滚动效果。您可以在此处检查：https://dkpyk75z6sfdo.cloudfront.net/

这是CSS代码：

.home {
background: url(assets/images/img1.jpg) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#information {
background: url(assets/images/b1.jpeg) no-repeat center center fixed; 
display: table;
height: 100%;
z-index: -1;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#information2 {
background: url(assets/images/ab9.jpeg) no-repeat center center fixed; 
display: table;
height: 100%;
z-index: -1;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#information3 {
background: url(assets/images/c4.jpg) no-repeat center center fixed; 
display: table;
height: 100%;
z-index: -1;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

HTML代码

<!-- first section - Home -->
<div class="home">
<div class="centered">
<h1>PARALLAX WEB DESIGN</h1>
</div>
</div>
<!-- /first section -->    

<!-- second section -->
<div id="information">
<div class="centered">
        <h1>SECTION 1</h1>
</div>
</div>
<!-- /second section -->

And so on

- Riya Jain

Answer 1

视差效果在移动设备上永远无法正常工作，这就是原因。

移动浏览器旨在尽可能高效地运行以节省电池寿命。其中一种方式是在滚动事件期间延迟JS执行。从症状上看，这将显示为视差效果不起作用，而是在滚动完成后跳到其新位置。

建议一旦进入移动端视口，立即停用所有视差效果。

更多关于此主题的阅读：http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

- Korgrue

---

谢谢@Korgrue！ - Riya Jain

看起来链接已经失效了。 - Ted Brownlow

现在是2023年，这种情况不应该再发生了。 - Altimus Prime