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

Question

I have this fixed height scrollable ul element which is for a video playlist. Scrolling works fine but when the user scrolls thru all the content they get stuck on the playlist container element. Basically, the scroll chain breaks and you can't scroll up unless you tap on one of the other elements on the page which is no easy job due to the playlist container taking all of the space on the screen and it doesn't have any padding around it.

What I need is, I need the browser to stop focusing on the ul element and shift the scroll event from element to window so they wouldn't get stuck scrolling on the ul element.

Playlist element's 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

You can solve this problem using JS (see below), but you should also consider restructuring your page so that you prevent this issue altogether. For example, you could choose not to limit the height of your ul element and still keep your video in focus when scrolling (e.g. by making it sticky).

---

Here is a possible solution based on JS (which needs some additional finetuning). It works by detecting when you have scrolled to the top of your ul element and bringing the video back into view.

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>