我有一个全高部分的视差页面。桌面上的 Safari、Chrome 和 IE 页面运行完美。但是,当在 iOS 设备上的 Safari 中查看时,下一个起始图钉会向上跳跃一个固定大小。我不太确定如何调试此问题及其在智能手机上的行为。
已包含两个屏幕截图以显示图钉如何从其原始位置移位。
我删掉了一小部分代码,这可能是不充分的,但如果复制困难,我很乐意补充这一点。
fiddle :https://jsfiddle.net/utz97at6/
CSS
html, body {
height:100%;
height: 100vh;
width: 100%;
font-size:100%;
background-color: #000;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
position: relative;
}
section {
min-height: 100%;
min-height: 100vh;
min-width: 100%;
background-color: none;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
HTML
<section id="section1"></section>
<section id="section2"></section>
JS
var controller = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onLeave", duration: "100%"}});
var tween = new TimelineMax();
new ScrollMagic.Scene({triggerElement: "#section1", triggerHook: 0})
.setTween(tween)
.setClassToggle('#anchor1', 'active')
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#section2", triggerHook: 0})
.setTween(tween)
.setClassToggle('#anchor2', 'active')
.addIndicators()
.addTo(controller);
最佳答案
通过为 body 和 section 元素设置固定高度解决了这个问题。由于 iOS 上 Safari 的特性,当您滚动时,高度会发生变化,并且 url-bar 和工具栏会折叠,这会导致响应式高度变量出现问题。
关于javascript - 使用 ScrollMagic 在 iOS Safari 上的全高视差页面上滚动时,引脚会跳动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37204395/