gpt4 book ai didi

css - iOS 解决方法 : Smooth scrolling without the CSS property Scroll Behavior: Smooth?

转载 作者:行者123 更新时间:2023-12-01 16:13:10 27 4
gpt4 key购买 nike

编辑:我找到了一个 jQuery 解决方案! https://codepen.io/chriscoyier/pen/dpBMVP这个确实适用于 iOS。我想 jQuery 桥接浏览器支持问题的日子还没有结束。

当然,在搜索了许多小时并最终发布到 Stack Overflow 之后,我在几分钟后找到了解决方案。我看到其他一些人在评论中提出了一些建议——我也会检查一下。然而,上面 Codepen 中的这个 jQuery 解决方案可以解决问题,并允许轻松自定义启动滚动速度!

----------------原始问题------------------------

您可能已经注意到,iOS Safari 或 iOS Chrome 都不支持 CSS 属性 Scroll Behavior: Smooth。我的问题是:是否有另一种 javascript 方法来动画滚动到页面上不依赖于此 CSS 属性的特定位置?也许是滚动少量然后重复此行为直到达到所需目标的东西?我尝试了以下操作,但出现“超出最大调用大小错误”:

function scrollExperiment() {
const finalPosition = 500
let i = 0
if (i < finalPosition) {
window.scrollTo(0, 1);
i++
setTimeout(scrollExperiment(), 10)
}
} scrollExperiment()

有没有人成功构建过这样的解决方法?我觉得应该有一个不依赖属性 Scroll Behavior: Smooth 的 jQuery 解决方案,但我还没有找到一个。我尝试了以下方法,它仍然无法在 iOS 上顺畅滚动:

$(window).scrollTop($("#anchor").offset().top); 

最佳答案

这是一个使用 jQuery 的 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

关于css - iOS 解决方法 : Smooth scrolling without the CSS property Scroll Behavior: Smooth?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59814404/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com