文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >iOS解决方案:平滑滚动而没有CSS属性滚动行为:平滑吗？

问iOS解决方案:平滑滚动而没有CSS属性滚动行为:平滑吗？
EN

Stack Overflow用户
提问于 2020-01-19 21:08:32
回答 1查看 2.7K关注 0票数 3

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

当然，在搜索了许多小时之后，最后再发布到Stack溢出，几分钟后我就找到了解决方案。我看到其他一些人在评论中提出了一些建议--我也会检查这些建议。然而，这个jQuery解决方案在上面的代码实现了这一技巧，并允许轻松定制滚动速度启动！

您可能已经注意到，iOS Safari或iOS Chrome都不支持CSS属性滚动行为:平滑。我的问题是:是否有另一种不依赖于此CSS属性的javascript方式来将滚动到页面上的特定位置？也许某种东西会滚动少量，然后重复这种行为，直到目标被击中？我尝试了以下方法，但是我得到了一个“最大调用大小超过错误”：

代码语言：javascript
复制
function scrollExperiment() {
    const finalPosition = 500
    let i = 0
    if (i < finalPosition) {
        window.scrollTo(0, 1);
        i++
        setTimeout(scrollExperiment(), 10)
    }
} scrollExperiment()

有人曾经成功地做过这样的解决方案吗？我觉得应该有一个不依赖于属性滚动行为的jQuery解决方案:平滑，但我还没有找到一个。我尝试了以下操作，但它仍然无法在iOS上顺利滚动：

代码语言：javascript
复制
$(window).scrollTop($("#anchor").offset().top);
mobile-safari
smooth-scrolling
css
ios
safari
EN

回答 1

Stack Overflow用户

发布于 2020-01-19 21:27:00

下面是一个使用jQuery的动画制作的快速示例，如评论中所建议的@volt：

​

代码语言：javascript
复制
$("html, body").animate({ scrollTop: "500px" });
代码语言：javascript
复制
body {
  background: #eee;
  padding: 20px;
  font-family: Helvetica;
}
代码语言：javascript
复制
<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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/59814404

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档