提问人：jun68ykt 提问时间：6/29/2017 最后编辑：Zack Waltonjun68ykt 更新时间：4/22/2023 访问量：2427
iOS 10：滚动以 -webkit-overflow-scrolling 为样式的 HTML 列表期间不确定冻结：触摸
iOS 10 : uncertain freezing during scroll of HTML list styled with -webkit-overflow-scrolling: touch
问：
概述
这个问题是关于滚动期间不确定的冻结，其是
使用 CSS 设置样式<ul />
-webkit-overflow-scrolling: touch
在 iOS 的 Safari 浏览器上。
类似问题
我阅读了类似的问题或帖子
如果我使用 -webkit-overflow-scrolling，Div 滚动有时会冻结
iOS 9 '-webkit-overflow-scrolling：touch' 和 'overflow： scroll' 破坏了滚动功能
http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/
等等。
但我无法察觉哪些解决方案可以解决我的问题。
此问题的 HTML 和 CSS
我在最新型号的iPad上展示了下一个。index.htmlindex.css
index.htmlindex.css
这些都很简单。以上只有一个列表，其中包含 50 个项目，由 .index.html<ul /><div class="container">
重现此问题的情况
也许您可以按照以下步骤进行复制。
滚动列表以到达其底部
确认侧边栏消失后，触摸并尝试进一步向下移动。 当然，列表是不能滚动的
接下来，改变手指移动的方向，并尝试倒回顶部
但是我发现，特别是手指指向顶部的第一笔是行不通的。
几秒钟后，我可以触摸列表并将其移动到顶部。
为了更好地理解，我将这部电影发布到 YouTube 上，我在其中操作 iPad 显示上面的 HTML。
a -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 才能运行服务器。
此致敬意。
答：
-1赞
Stef
7/30/2018
#1
在你的CSS中
overflow: hidden;
或
overflow: scroll;
您可以将 CSS @media规则用于不同的显示
-2赞
Fpl Nepal
7/30/2018
#2
对不同的显示使用@media规则。 例：-
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}评论
0赞
Jens Væver Hartfelt
10/19/2018
似乎你的答案与问题无关。这将如何改变滚动行为？
0赞
Dean
5/6/2019
#3
可以绕过此问题的一种方法是使用身体的滚动。但这是针对某些情况的。
0赞
Jakob E
4/22/2023
#4
这有点骇人听闻，但您可以通过在列表滚动到顶部或底部时触发一个 px 滚动来绕过滚动锁定。
下面是一个简单示例：
PS 您可以使用翻滚行为来解决此问题，但这需要 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>
评论