相关疑难解决方法(0)
防止在iOS上溢出/橡皮圈滚动
关于SO上的溢出/橡皮带滚动主题已经存在多个问题但是
- 它们都没有为iOS 9.3.2上的所有案例提供解决方案
- 他们都没有提供有关问题本身的广泛而完整的信息
这就是我将这篇文章创建为知识体系的原因.
问题:
在任何其他帖子中从未提及的事情是iOS溢出滚动实际上是两部分行为.
1.溢出滚动内容 overflow: auto/scroll
这是元素的通常已知且最常想要的行为,-webkit-overflow-scrolling: touch其中连续/动量滚动行为经过元素容器以平滑地减慢滚动内容.
当您以足够高的动量滚动元素的内容以使动量滚动超过滚动内容的长度时,就会发生这种情况.
通过此行为,element.scrollTop属性相应地更改为元素滚动位置并且小于0或大于最大scroll(element.scrollHeight - element.offsetHeight).
2.溢出滚动 <body>
如果您尝试滚动任何元素已经在其最小/最大滚动位置甚至更远(顶部向上的元素或底部向下的元素),则会发生此行为.然后滚动似乎"冒泡"到<body>标签,并滚动整个视口.
与上述相反,该element.scrollTop属性不会改变,而是document.body.scrollTop改变.
聚焦锁定和行为之间切换(1.5秒延迟)
在这种情况下最令人恼火的事情是上述两种类型之间的切换不会立即切换.
输入其中一个之后,您无法将焦点切换到任何其他元素(可滚动元素,按钮,链接......),因此滚动行为也不会改变.
例如:如果您向上滚动已经位于其顶部位置的元素,则输入
overflow scrolling type 2并且用户最自然的反应是尝试向下滚动.因为焦点被锁定在身体滚动而不是overflow scrolling type 1它停留在type 2身体上并且整个身体向下滚动.然后,典型的用户开始任意地开始频繁地向上和向下滚动而不会突破type 2.
焦点的切换以及滚动行为的改变只能在溢出动画结束并且元素静止(甚至比[大约0.5s]更长)之后才会发生.
因此回到前面的例子,用户的正确反应是停止触摸屏幕大约1s - 1.5s然后再尝试向下滚动.
推荐指数
解决办法
查看次数
iOS 10:使用-webkit-overflow-scrolling样式滚动HTML列表时不确定冻结:触摸
概观
你好.
这个问题是关于滚动期间<ul />使用CSS设置样式的不确定冻结
-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
我接下来显示的index.html与index.cssiPad上的最新型号.
index.htmlindex.css
这些都很简单.在index.html以上仅具有一个列表<ul />
,其中包括50个项目,并且由包含<div class="container">.
重现此问题的情况
也许你可以按照以下程序重现.
滚动列表到达底部
确认侧杆消失后,触摸并尝试向下移动.当然,列表无法滚动
接下来,改变移动手指的方向并尝试倒回到顶部
但我发现手指指向顶部的特别是第一次中风不起作用.
几秒钟后,我可以触摸并将列表移到顶部.
为了更好地理解,我将这部电影发布到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运行服务器.
最好的祝福.
推荐指数
解决办法
查看次数
iOS safari：滚动在位置内被破坏：已修复；元素
在元素内部position: fixed;，如果您尝试在触摸开始时以错误的方式滚动滚动元素，滚动元素将“锁定”。
示例：触摸屏幕并向下拖动，然后向后拖动。该元素不会滚动。如果松开，等待几秒钟，然后尝试向上拖动，它就会滚动。
http://12me21.github.io/scroll-test.html
body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#scroll-container {
overflow-y: scroll;
height: 100%;
}
#scroller {
height: 200vh;
font-size: 50px;
}<body>
<div id=scroll-container>
<div id=scroller>Test<br>more text</div>
</div>
</body>这个答案：/sf/answers/3621311851/似乎与我遇到的问题相同，但修复不再有效。它似乎发生在所有固定元素内，并且不再由其引起-webkit-overflow-scrolling: touch;。
现在有办法解决这个问题吗？或者我只需要完全避免position: fixed;？
推荐指数
解决办法
查看次数
CSS 滚动捕捉在到达顶部时溢出主体
我有一个非常奇怪的问题。也许是行为上的错误scroll-snaps？
当我到达页面顶部并继续向上滚动时，如果我不再向下滚动，则正文会溢出并停留在那里。即使我重新加载页面。
仅在 Chrome for Mac（版本 75.0.3770.100（官方版本）（64 位））中进行，我在 Safari 和 Firefox 中进行了测试，两者似乎都表现正常。
Jsfiddle 在这里，但你不能在那里重现它。可能是因为它位于 iframe 内？
问题视频：
推荐指数
解决办法
查看次数