2

I have a list of items that has an item prepended to it at a regular interval (think a feed of data). The list should update in real-time as new items come in, however if the user scrolls down it should "lock" in place to make the list easier to read. (If a user has scrolled, they want to be able to read the items without them being pushed down every time a new item is added)

It appears that on Chrome (desktop) and Android, the browser implements this automatically. However, on iOS it does not.

As a work around, I figured I could use scrollBy to move the scroll position when a new item is added IF the user has scrolled down. This mostly works, and prevents the list from jumping. However, if the user is currently in the process of scrolling, scrollBy seems to have no effect and the items jump around.

To reproduce:

Open on iOS: https://codepen.io/Cyral/full/JjbbPaj

Observe that new items are added every second. Scroll down the list a bit and notice how items are no longer moving (great!), however try scrolling slowly (without taking your finger off the screen) and notice how the items start updating again.

It appears that whatever keeps track of the user scroll amount overrides the scrollBy command, resulting in the list jumping around. If you scroll a bit and take your finger off and let it "smooth scroll" you can also see how it jumps a bit. Is there a way to create the desired behavior of the list "pausing" when scrolled away, but updating in realtime once scrolled to the top?

Here is a reference to see the desired behavior on desktop: (It is the same code, except the scrollBy call has been removed as it is not needed) https://codepen.io/Cyral/full/PobboYE

Update: It appears it is only broken on iOS 14. On 12 and 13 it works as it does on desktop, with no hacky scrollBy workaround.

Cyral
  • 13,999
  • 6
  • 50
  • 90

1 Answers1

0

Like this?

const container = document.getElementById("container");

let textNum = 0;
setInterval(() => {
  container.innerHTML = `<p>some text ${++textNum}</p><br/>` + container.innerHTML;

  //scroll
  savedScroll && (container.scrollTop = container.scrollHeight - savedScroll);
}, 700);

let savedScroll = false;
container.addEventListener("scroll", () => {
  if (container.scrollTop <= 10 /*if scroll is near top of container*/) {
    savedScroll = false;
  } else {
    savedScroll = container.scrollHeight - container.scrollTop;
  }
});
body {
  line-height: 5px;
  margin: 0px;
}
div {
  width: 200px;
  height: 190px;
  overflow-y: scroll;
  border: 1px solid #000000;
}
<div id="container"></div>

It listens for scroll, and if the current scroll is at the top, it disable auto scrolling, else, save current scroll relative to bottom of container. The scroll is set to containerHeight - savedScroll everytime the container is updated.

luek baja
  • 1,475
  • 8
  • 20
  • Hi, this works as long as the user doesn't isn't scrolling which is the problem I am stuck on. I made a pen of it here: https://codepen.io/Cyral/full/jOVVOKg Open on iOS and see that it works UNLESS you are currently scrolling (or scroll and let go and see how it jumps until the smooth scroll stops) – Cyral Feb 11 '21 at 03:58