视差滚动不适用于移动CSS [英] Parallax scrolling not working on mobile css

问题描述

我的视差滚动在android和iOS的移动设备上均不起作用.该代码适用于台式机，但不适用于移动设备，无论使用哪种浏览器.背景图像没有以视差效果滚动.您可以在此处 https://dkpyk75z6sfdo.cloudfront.net/

My parallax scrolling is not working on mobile devices, both android and iOS. The code works great for desktop but not for mobile, be it any browser. Background images are not scrolling in parallax effect. You can check it here 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 -->

依此类推

推荐答案

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

Parallax will never work properly on mobile devices - and here is why.

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

Mobile browsers are designed to function as efficiently as possible in order to save on battery life. One way that they do that is that they delay JS execution during a scroll event. Symptomatically this will display as the parallax not parallaxing but rather jumping to its new position after scroll completes.

我建议一次禁用所有视差到移动视口.

I recommend disabling all parallax once down to mobile viewport.

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

Further reading on this topic: http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

这篇关于视差滚动不适用于移动CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！