【问题标题】:Prevent elastic scrolling in ipad/iphone safari, but allow content scroll防止 ipad/iphone safari 中的弹性滚动,但允许内容滚动
【发布时间】:2025-12-15 15:30:01
【问题描述】:

我想禁用弹跳效果(弹性滚动)ipad/iphone safari 浏览器。并尝试在 touchmove 上使用防止默认值,但这会阻止整个滚动。我希望能够滚动内容,但只是防止反弹。我的页眉和页脚是固定的。 一个想法?

【问题讨论】:

  • 我知道-webkit-overflow-scrolling: touch; 启用弹性滚动...您可以尝试将其设置为auto 以将其关闭。适用于默认情况下没有弹性滚动的元素。
  • @TimMedora 我要为哪个控件应用该属性,我尝试在我的内容 div 上应用它,但显示错误“未知属性名称”
  • 您可以尝试将其应用于 CSS 中的整个 body 元素...我不知道这是否可行;只是想我会提到它。更可能起作用的是隐藏正文的溢出,并使用overflow:auto 添加另一个元素。默认只有body的scroll是有弹性的;新元素应该滚动而不会反弹。
  • @TimMedora Tim,这个想法适用于 OS-X 上的 Safari,但不适用于 ios(触摸设备),overflow:hidden on body element 对 ios 没有影响,已经尝试过了。

标签: javascript safari scroll bounce


【解决方案1】:

使用 iOS8 (AppleWebKit/600) 上的 Mobile Safari,您可以使用以下方法检测滚动弹跳是否发生在顶部(向下滑动):

window.onscroll = function() { if (document.body.scrollTop

我有一个游戏,想看看是否能找到一种干净的方法来“中断”弹跳,但没有找到任何好的方法。

请注意 window.onscroll 解决方案在 UIWebView 中不起作用,因为我认为在 UIWebView 中不会触发 onscroll 事件,但这不是问题,因为 UIWebView 没有反弹!您可以使用 https://*.com/a/30495399/436776 检测是否使用 UIWebView 与 WKWebView

我正在使用此代码进行测试(必须克隆并打开全屏才能在 iOS 上测试):http://jsbin.com/tocako/edit

【讨论】: