视差滚动不适用于移动 CSS答案

【问题标题】：Parallax scrolling not working on mobile css视差滚动不适用于移动 CSS
【发布时间】：2017-06-07 15:20:09
【问题描述】：

我的视差滚动无法在移动设备上运行，包括 Android 和 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 -->

等等

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案1】：

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

移动浏览器旨在尽可能高效地运行，以节省电池寿命。他们这样做的一种方法是在滚动事件期间延迟 JS 执行。症状上，这将显示为视差不是视差，而是在滚动完成后跳转到新位置。

我建议在移动视口中禁用所有视差。

关于这个主题的进一步阅读：http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

【讨论】：

谢谢@Korgrue！