iOS解决方法：在没有CSS属性的情况下平滑滚动滚动行为：平滑吗？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iOS解决方法：在没有CSS属性的情况下平滑滚动滚动行为：平滑吗？相关的知识，希望对你有一定的参考价值。
编辑：我找到了一个完美的解决方案！https://codepen.io/chriscoyier/pen/dpBMVP当然，在搜索了许多小时之后，最终发布到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()
有人曾经成功建立过这样的解决方法吗？我觉得应该有一个不依赖于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>以上是关于iOS解决方法：在没有CSS属性的情况下平滑滚动滚动行为：平滑吗？的主要内容，如果未能解决你的问题，请参考以下文章