【问题标题】:CSS: Disable bounce effect for scroll on iOS 13CSS:在 iOS 13 上禁用滚动反弹效果
【发布时间】:2019-11-03 20:55:38
【问题描述】:

Safari 13 release notes 中声明不再需要对元素应用以下内容来启用反弹滚动效果:

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

但是,我现在不能再使用以下代码禁用此效果:

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

我需要这个用于我正在制作的旋转木马。关于如何修复它的任何想法?

【问题讨论】:

  • 您是否尝试过添加scroll-snap-type:none 我不确定它是否会起作用,但如果弹跳是由可能会阻止它的滚动快照引起的。
  • 试试这个解决方案。它可能会起作用。 bram.us/2016/05/02/…
  • @MartinBarker 不幸的是 scroll-snap-type 不会改变“过度滚动”行为......
  • @MTBthePRO 这个解决方案也不再有效......
  • @Ood 你找到解决方案了吗?请分享。

标签: html ios css scroll webkit


【解决方案1】:

在 Safari 中填充这个 CSS 属性是相当棘手的。

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

但对于可滚动元素,则需要 JavaScript。

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

这就是诀窍:

创建一个至少比其滚动父级的大小高 3px 的内部元素,以强制该区域获得过度滚动行为。 立即将滚动位置设置为 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

【讨论】:

  • 太好了,你的回答对我有帮助。谢谢
【解决方案2】:

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

overflow: hidden;

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

div {
  overflow: auto;
}

【讨论】:

  • 我已经尝试过了,不幸的是它不再起作用了。 :(
【解决方案3】:

我不知道我是否真的理解正确,但它就是这样! :)

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

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

希望这会有所帮助:

【讨论】:

  • 不幸的是 -webkit-overflow-scrolling 似乎不再起作用了......
  • 找到了这个,不确定这是否是您需要的但值得一试:github.com/lazd/iNoBounce
猜你喜欢
  • 2018-11-10
  • 1970-01-01
  • 2021-04-28
  • 1970-01-01
  • 2019-08-11
  • 2020-10-15
  • 1970-01-01
  • 1970-01-01
  • 2023-04-04
相关资源
最近更新 更多