编辑:我找到了一个 jQuery 解决方案!https://codepen.io/chriscoyier/pen/dpBMVP https://codepen.io/chriscoyier/pen/dpBMVP这个确实可以在 iOS 上运行。我想 jQuery 桥接浏览器支持问题的日子还没有完全结束。
当然,经过几个小时的搜索并最终发布到 Stack Overflow 后,几分钟后我找到了解决方案。我看到其他一些人在评论中提出了一些建议——我也会查看这些建议。然而,上面 Codepen 中的这个 jQuery 解决方案确实有效,并且允许轻松定制滚动速度!
----------------原问题------------------------------------
您可能已经注意到,iOS Safari 或 iOS Chrome 都不支持 CSS 属性“滚动行为:平滑”。我的问题是:是否有另一种 JavaScript 方法可以将滚动动画到页面上的特定位置,且不依赖于此 CSS 属性?也许是滚动少量然后重复此行为直到击中所需目标的东西?我尝试了以下操作,但收到“超出最大调用大小错误”:
function scrollExperiment() {
const finalPosition = 500
let i = 0
if (i < finalPosition) {
window.scrollTo(0, 1);
i++
setTimeout(scrollExperiment(), 10)
}
} scrollExperiment()
有没有人成功地构建过这样的解决方法?我觉得应该有一个 jQuery 解决方案来解决这个问题,它不依赖于属性 Scroll Behaviour: Smooth,但我还没有找到。我尝试了以下方法,但在 iOS 上仍然无法顺利滚动:
$(window).scrollTop($("#anchor").offset().top);
这是一个使用 jQuery 的简单示例animate https://api.jquery.com/animate/,正如 @volt 在评论中建议的那样:
$("html, body").animate({ scrollTop: "500px" });
body {
background: #eee;
padding: 20px;
font-family: Helvetica;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
<p>text goes here text goes here</p>
</div>
jsFiddle https://jsfiddle.net/06o8vLuy/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)