Restoring virtual scroll position

[dfabulich]

The specified API doesn't indicate any way to preserve/restore scroll position.

Many sites that use infinite scrolling offer a way to link to a particular position, e.g. Discourse forums https://meta.discourse.org/t/topic-list-previews/101646/16 I don't see how this would be done with the current virtual scroller.

It's especially not clear whether scroll position would be automatically preserved when the user uses the Back button to navigate back to a page with a virtual scroller.

[domenic]

Good issue to keep track of! The intention is that this behaves just like a div. That is:

• You can link to a particular position using e.g. ID anchors inside the scroller.
• Scroll position will be restored, in browsers that provide that functionality.

This will be good thing to capture in the spec, probably in the same way that the spec for div captures it.

[dfabulich]

I think developers should have control over this behavior. For example, automatic scroll preservation doesn't necessarily make sense with reverse-chronological feeds. If I'm browsing a Twitter and click on a link on the 17th tweet, do I want to navigate back to the item I was on, or to the 17th tweet, whatever that may now be?

For Discourse, they synchronize the scroll position with the URL; on refresh, it scrolls you to the item linked in the URL.

[domenic]

Right, developers will have the same control as they do with div. They can sync to the URL using IDs.

[dfabulich]

Is the idea that the developer would just querySelector to find the target element and then scrollIntoView it? Or would the <virtual-scroller> itself have a scrollTo method?

[domenic]

It happens automatically: whenever the URL is https://example.com/foo#bar, the browser finds the element with ID bar and scrolls to it.

For example, your comment has URL https://github.com/WICG/virtual-scroller/issues/165#issuecomment-487328189, which if you go to, it will scroll to the comment directly. Your comment is a child of <div class="js-discussion js-socket-channel"> but it should work just as well if your comment is a child of <virtual-scroller>.