3

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
}

2 Answers2

0

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>
thabs
  • 603
  • 2
  • 13
  • Thank you so much for the effort, it worked fine on desktop but doesn't seem to be working on iPhone, I found out that Safari iOS doesn't support scroll into view options so I removed the options but still didn't work. What do you think we should do here? Should I just skip the JS and find a CSS solution? I would appreciate it if you can guide me here, my client has been waiting for a long time and I really need to find a solution fast, thank you. –  Apr 20 '21 at 06:33
  • 1
    Maybe [this question](https://stackoverflow.com/questions/2863547) about iOS scroll behavior helps? Have you tried setting `-webkit-overflow-scrolling` to `auto`? Maybe this option messes with scroll chaining. – thabs Apr 20 '21 at 07:08
  • I'll check out that post you sent me and yeah it's currently set to auto –  Apr 20 '21 at 08:03
0

Turns out momentum-based smooth scrolling was the problem. So I had to remove it and the problem was solved. You lose the smooth scrolling function but who cares.

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