如何在移动设备上的溢出滚动元素上保留滚动链?
How to preserve scroll-chain on overflow scrollable element on mobile?
我有一个用于视频播放列表的固定高度可滚动 ul
元素。滚动效果很好,但是当用户滚动浏览所有内容时,他们会卡在播放列表容器元素上。基本上,滚动链中断并且您无法向上滚动,除非您点击页面上的其他元素之一,这不是一件容易的事,因为播放列表容器占据了屏幕上的所有 space 而它没有周围没有任何填充。
我需要的是,我需要浏览器停止关注 ul
元素并将滚动事件从元素转移到 window 这样它们就不会卡在 ul 元素上滚动.
播放列表元素的 CSS:
.plyr-playlist-wrapper ul {
padding: 0;
margin: 0;
max-height: 28em;
min-height: 28em;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; // this is the problem
}
您可以使用 JS 解决此问题(见下文),但您还应该考虑重构您的页面,以便完全避免此问题。例如,您可以选择不限制 ul
元素的高度,并在滚动时仍保持视频在焦点上(例如,将其设置为 sticky)。
这里有一个可能的基于JS的解决方案(需要一些额外的微调)。它的工作原理是检测您何时滚动到 ul
元素的顶部并将视频带回视图。
document.getElementById("suggestions").onscroll = (e) => {
if (e.target.scrollTop == 0) {
document.getElementById("video").scrollIntoView({
behavior: "smooth"
});
}
}
#container {
margin-top: 5em;
}
#video {
height: 10em;
background: blue;
}
#suggestions {
overflow-y: scroll;
height: 28em;
margin: 0;
padding: 0;
background: red;
}
.suggestion {
height: 10em;
margin: 12px;
background: yellow;
}
<div id="container">
<div id="video">
</div>
<ul id="suggestions">
<li class="suggestion">
</li>
<li class="suggestion">
</li>
<li class="suggestion">
</li>
<li class="suggestion">
</li>
</ul>
</div>
事实证明,基于动量的平滑滚动是问题所在。所以我不得不删除它,问题就解决了。你失去了流畅的滚动功能,但谁在乎呢。
// setting it to 'touch' will give you smooth scrolling but it will prob break the scroll chaining
-webkit-overflow-scrolling: auto;