如何在移动设备上的溢出滚动元素上保留滚动链？

Question

我有一个用于视频播放列表的固定高度可滚动 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
}

Answer 1

您可以使用 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>

Answer 2

事实证明，基于动量的平滑滚动是问题所在。所以我不得不删除它，问题就解决了。你失去了流畅的滚动功能，但谁在乎呢。

// setting it to 'touch' will give you smooth scrolling but it will prob break the scroll chaining    
-webkit-overflow-scrolling: auto;

如何在移动设备上的溢出滚动元素上保留滚动链？

How to preserve scroll-chain on overflow scrollable element on mobile?

javascript

css

scroll

scrollview

scrollbar