据我所知,滚动时无法执行 JS。它知道的所有有效的 iOS 视差滚动脚本都在 js 中重新创建 native 滚动效果以实现这一点,例如。滚动
苹果是如何在自己的网站上做到这一点的。
滚动此页面时查看模糊的背景图像。
最佳答案
可以在没有 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 insude 媒体查询用于各种设备屏幕尺寸,因为我喜欢根据内容使用不同的媒体查询。
请注意,这是一个简单的视差,到目前为止,我还没有在同一页面上“堆叠”多个视差,但是在上面的代码和上面 Keith Clark 示例中的示例代码之间,这应该是一个很好的起点。
关于javascript - iOS 上的 Safari 中的视差滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24057655/