iOS 上 Safari 中的视差滚动答案

【问题标题】：Parallax scrolling in Safari on iOSiOS 上 Safari 中的视差滚动
【发布时间】：2014-06-05 10:24:10
【问题描述】：

据我了解，滚动时无法执行 JS。它知道的所有工作 iOS 视差滚动脚本在 js 中重新创建本机滚动效果以实现此目的，例如。滚动

那么苹果是如何在自己的网站上实现的。

在此页面上滚动时查看模糊的背景图像。

http://www.apple.com/ios/carplay/

【问题讨论】：

标签： javascript ios scroll parallax

【解决方案1】：

完全可以在没有 JS 的 iOS 设备上创建 CSS。有一些很好的例子，比如 Keith Clark 的，你可以找到 here

但是我个人发现这在 iOS 设备上并没有达到预期的效果。正如我预期的那样，在我释放触摸后页面会继续滚动，但似乎这并没有发生 - 几乎就像页面是“粘性的”。我发现我遇到的一些纯 CSS 解决方案就是这种情况。

我通常使用 Bootstrap，所以下面的例子是我用来产生我所追求的视差效果的例子。

在你的 CSS 中添加：

#fixedbg { 
    background:url(../img/yourparallax-image.jpg) no-repeat center center;
    background-size:cover;
    height:100%;
    position:fixed !important;
    width:100%;
    z-index:-2;
    top:0;
}
.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%; 
}

然后在你的html中添加这个：

<div id="fixedbg"></div>

<header id="top" class="header">
</header>

<section id="article" class="article">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-10 col-md-12">

                <p class="text">Example text content goes here</p>

            </div>
        </div>
    </div>
</section>

#fixedbg 从 CSS 调用正确的图像，然后标题部分设置我想要运行视差效果的整页图像。

我通常将#fixedbg css 放在针对各种设备屏幕尺寸的媒体查询中，因为我喜欢根据内容使用不同的。

请注意，这是一个简单的视差，到目前为止，我还没有在同一页面上“堆叠”多个视差，而是在上面的代码和上面 Keith Clark 的示例中采样的代码之间，这应该提供一个很好的起点。

【讨论】：