iOS 10:使用-webkit-overflow-scrolling样式滚动HTML列表时不确定冻结:触摸

Question

概观

你好.
这个问题是关于滚动期间<ul />使用CSS设置样式的不确定冻结

-webkit-overflow-scrolling: touch

在iOS的Safari浏览器上.

类似的问题

我读过类似的问题或帖子

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

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

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

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

等等.
但我无法察觉哪个解决方案可以解决我的问题.

此问题的HTML和CSS

我接下来显示的index.html与index.cssiPad上的最新型号.

• 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示例:触摸
https://www.youtube.com/watch?v=MkAVYbO_joo

上述程序项目的问题点4是在这部电影的TC0:08左右.

应该注意的是,我上面的电影中的iPad是

• iPad 9.7英寸(最新型号)
• iOS 10.3.2
• 我在其中使用Safari浏览器.

想要回答

你可以帮我一个忙吗？我需要一些帮助来解决下一个问题.

• 为什么出现上面列表中的4.的情况？

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

示例程序

可以从GitHub下载上面电影中显示的示例程序.
以下网址是其回购.

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

此示例要求Node.js运行服务器.

最好的祝福.

Answer 1

在你的CSS中

overflow: hidden;

或者

overflow: scroll;

您可以针对不同的显示使用 css @media 规则