iOS 10：在使用 -webkit-overflow-scrolling: touch 设置样式的 HTML 列表滚动期间不确定冻结

Question

概览

这个问题是关于

<ul />

的滚动过程中的不确定冻结，这是 用 CSS 设计样式

-webkit-overflow-scrolling: touch

在 iOS 的 Safari 浏览器上

类似问题

我读过类似的问题或帖子

如果我使用 -webkit-overflow-scrolling，Div 滚动有时会冻结

iOS 9 `-webkit-overflow-scrolling:`touch 和 `overflow: scroll` 破坏了滚动能力

iPad 上的 Webkit 溢出滚动触摸 CSS 错误

http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/

等等。
但我看不出哪些解决方案可以解决我的问题。

本期的 HTML 和 CSS

我在最新型号的iPad上用

index.html

显示了下一个

index.css

。

• index.html

  • https://github.com/jun68ykt/wos-touch-sample/blob/master/index.html

• index.css

  • https://github.com/jun68ykt/wos-touch-sample/blob/master/index.css

这些都很简单。上面的

index.html

只有一个列表

<ul />

其中包括 50 个项目，包含在

<div class="container">

.

本期复现情况

也许你可以按照下面的流程重现

1. 滚动列表到达底部

2. 确认侧边栏消失后，触摸并尝试进一步向下移动。 当然，列表不能滚动

3. 接下来，改变移动手指的方向，尝试倒回顶部

4. 但我发现特别是第一个手指指向顶部的笔画不起作用。

5. 几秒钟后，我可以触摸并将列表移动到顶部。

为了更好地理解，我将电影发布到 YouTube 上，我在其中操作 iPad 以显示上面的 HTML。

-webkit-overflow-scrolling 示例：touch
https://www.youtube.com/watch?v=MkAVYbO_joo

以上程序项目的问题点4查看于 关于这部电影的 TC0:08。

需要注意的是，上面电影中我的iPad是

• iPad 9.7 英寸（最新型号）
• iOS 10.3.2
• 我在其中使用 Safari 浏览器。

想要的答案

你能帮我一个忙吗？下一个问题我需要一些帮助。

• 为什么会出现上面4.的情况？

• 如何修复 HTML 或 CSS 让列表滚动更顺畅？

示例程序

可以从 GitHub 下载上面电影中显示的示例程序。
以下 URL 是它的回购协议。

https://github.com/jun68ykt/wos-touch-sample

此示例需要 Node.js 来运行服务器。

致以诚挚的问候。

Answer 1

可以绕过这个问题的方法是使用身体的滚动。但这是针对特定场景的。

Answer 2

有点hackish，但是当列表滚动到顶部或底部时，您可以通过触发一个像素滚动来绕过滚动锁定。

这是一个简单的例子：

PS 你可以使用 overscroll-behavior 来解决这个问题，但这需要 iOS 16

const list = document.querySelector('.list');

list.addEventListener('scroll', onePxHack, { passive: false })

function onePxHack(e) {
  const { currentTarget: list } = e
  const atTop = list.scrollTop === 0;
  const atBot = list.scrollHeight - list.scrollTop === list.offsetHeight;
  if (atTop || atBot) {
    list.scrollTop += atTop ? 1 : -1;
    e.preventDefault();
  }
}

.container {
  background-color: #DDD;
  width: 300px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 50px;
  margin-left: 50px;
}

.list {
  height: 500px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 24pt;
  padding: 0;
  margin: 0;
}

.list>li {
  list-style-type: none;
}

<div class="container">
  <ul class="list">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
    <li>006</li>
    <li>007</li>
    <li>008</li>
    <li>009</li>
    <li>010</li>
    <li>011</li>
    <li>012</li>
    <li>013</li>
    <li>014</li>
    <li>015</li>
    <li>016</li>
    <li>017</li>
    <li>018</li>
    <li>019</li>
    <li>020</li>
    <li>021</li>
    <li>022</li>
    <li>023</li>
    <li>024</li>
    <li>025</li>
    <li>026</li>
    <li>027</li>
    <li>028</li>
    <li>029</li>
    <li>030</li>
    <li>031</li>
    <li>032</li>
    <li>033</li>
    <li>034</li>
    <li>035</li>
    <li>036</li>
    <li>037</li>
    <li>038</li>
    <li>039</li>
    <li>040</li>
    <li>041</li>
    <li>042</li>
    <li>043</li>
    <li>044</li>
    <li>045</li>
    <li>046</li>
    <li>047</li>
    <li>048</li>
    <li>049</li>
    <li>050</li>
  </ul>
</div>

Answer 3

在你的CSS中

overflow: hidden;

或

overflow: scroll;

你可以为不同的显示使用 css @media 规则

Answer 4

对不同的显示使用@media 规则。 例子：-

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}


@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}