javascript - 视差滚动不适用于移动 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 -->

等等

Answer 1

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

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

我建议禁用所有视差到移动视口(viewport)。

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