CSS：在 iOS 13 上禁用滚动弹跳效果

Question

在 Safari 13 release notes 中声明不再需要将以下内容应用于元素以启用弹跳滚动效果：

div {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch; /* No longer needed */
}

但是，我现在无法再使用以下代码禁用此效果：

div {
  overflow-x: scroll;
  -webkit-overflow-scrolling: auto;
}

我正在制作的旋转木马需要这个。知道如何解决吗？

Answer 1

我不知道我是否真的理解正确，但就是这样！ :)

你不能从你的文件中删除那行代码吗？

你也可以尝试写-webkit-overflow-scrolling: auto; !important

希望这对您有所帮助：

Answer 2

我认为您应该尝试使用 Safari 中阻止弹跳滚动行为的溢出属性来更改它。要在滚动 div 的父容器中执行此操作，您必须设置：

overflow: hidden;

然后在您的 div 中设置如下内容：

div {
  overflow: auto;
}

Answer 3

在 Safari 中填充此 CSS 属性非常棘手。

对于 non-scrollable 元素，您可以通过简单地关闭触摸手势来防止滚动链接。您可以使用 Safari 支持的 CSS 属性来做到这一点：touch-action: none.

但对于可滚动元素，JavaScript 将是必需的。

请记住，当您到达元素的边界时会发生滚动链接。所以我们需要确保用户永远无法完全滚动到顶部或底部。以错误的方式执行此操作可能会导致 UX 问题，因为用户显然会与默认的惯性滚动作斗争。

所以这是诀窍：

创建一个至少比其滚动父级尺寸高 3 像素的内部元素，以强制该区域获得过度滚动行为。立即将滚动位置设置为 1px 以防止向上滚动时滚动链接使用 JavaScript，当滚动位置恰好为 0 或恰好在底部时捕获。在 requestAnimationFrame 之后，将滚动位置设置为距离顶部或底部 1px。容器仍将获得惯性滚动（用户不必对抗它）但不会触发滚动链接。

这是 JavaScript 函数：

this.addEventListener('scroll', async handleScroll() {
  await new Promise(resolve => window.requestAnimationFrame(resolve))
  const {
    scrollTop,
    scrollLeft,
    scrollHeight,
    clientHeight
  } = this
  const atTop = scrollTop === 0
  const beforeTop = 1
  const atBottom = scrollTop === scrollHeight - clientHeight
  const beforeBottom = scrollHeight - clientHeight - 1

  if (atTop) {
    this.scrollTo(scrollLeft, beforeTop) 
  } else if (atBottom) {
    this.scrollTo(scrollLeft, beforeBottom)
  }
}

来源：https://dev.to/mpuckett/the-holy-grail-web-app-shell-with-header-and-footer-for-iphone-549j

CSS：在 iOS 13 上禁用滚动弹跳效果

CSS: Disable bounce effect for scroll on iOS 13

html

css

scroll

webkit

ios