iOS 10:使用-webkit-overflow-scrolling设置样式的HTML列表滚动期间不确定冻结:触摸 [英] iOS 10 : uncertain freezing during scroll of HTML list styled with -webkit-overflow-scrolling: touch
问题描述
你好.
此问题与滚动<ul />期间出现不确定的冻结有关，即
用CSS样式
Hello.
This issue is about an uncertain freeze during scroll of <ul /> which is
styled with CSS
-webkit-overflow-scrolling: touch
在iOS的Safari浏览器上.
on the Safari browser of iOS.
我阅读了类似的问题或帖子
I read similar issues or posts
如果我使用-webkit-overflow-scrolling，有时div滚动会冻结
iOS 9`-webkit-overflow-scrolling:touch`和`overflow:scroll`破坏了滚动功能
and so on.
But I can not perceive which solutions fix my problem.
我在最新型号的iPad上显示了下一个index.html和index.css.
I displayed the next index.html with index.css on the latest model of iPad.
-
index.html
index.css
这些非常简单.上面的index.html只有一个列表<ul />
其中包含50个项目，并包含在<div class="container">中.
These are very simple. The index.html above has only one list <ul />
which includes 50 items and is contained by <div class="container"> .
也许您可以按照以下步骤进行复制.
Maybe you can reproduce according to the following procedure.
-
滚动列表到达其底部
Scrolling list to reach the bottom of it
在确认侧栏消失之后，触摸并尝试进一步向下移动. 当然，列表不能滚动
After confirming the side bar vanished, touch and try to move further down. Of course, list can not be scrolled
接下来，更改移动手指的方向，然后尝试快退到顶部
Next, change the direction of moving finger and try to rewind to the top
但是我发现指向顶部的手指的尤其是第一笔触不起作用.
But I found that the especially first stroke of finger directed to top did not work.
几秒钟后，我可以触摸列表并将其移到顶部.
After a few seconds, I could touch and move list to the top.
为了更好地理解，我将电影发布到YouTube，在其中我操作iPad来在上面显示HTML.
For better understanding, I posted the movie into YouTube in which I operated iPad to display HTML above.
-webkit-overflow-scrolling的示例:触摸
https://www.youtube.com/watch?v=MkAVYbO_joo
查看以上过程项目的问题点4. 关于这部电影的TC0:08.
The problem point 4. of the procedure items above is viewed at about TC0:08 of this movie.
请注意，以上电影中我的iPad是
It should be noted that my iPad in the movie above is
- iPad 9.7英寸(最新型号)
- iOS 10.3.2
- 然后我在其中使用Safari浏览器.
你能帮我一个忙吗?我需要一些帮助来解决下一个问题.
Would you do me a favor? I need some help for next questions.
-
为什么会出现上述列表4.的情况?
Why does the situation like 4. of list above occured ?
如何修复HTML或CSS以使列表更平滑地滚动?
How to fix HTML or CSS to let the list scroll more smoothly ?
可以从GitHub下载上面电影中显示的示例程序.
以下网址是它的存储库.
A sample program which was displayed in the movie above can be downloaded from GitHub.
Following URL is its repo.
https://github.com/jun68ykt/wos-touch-sample
此示例需要Node.js来运行服务器.
This sample requires Node.js to run server.
最诚挚的问候.
推荐答案
可以绕过该问题的方法是使用正文的滚动条.但这是针对特定情况的.
A method which can bypass the issue is using the body's scroll. But it is for certain scenario.
这篇关于iOS 10:使用-webkit-overflow-scrolling设置样式的HTML列表滚动期间不确定冻结:触摸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
