search

WICG / virtual-scroller

Other
2k stars 83 forks source link

Restoring virtual scroll position #165

Open dfabulich opened 5 years ago

dfabulich commented 5 years ago

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 commented 5 years ago

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

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

dfabulich commented 5 years ago

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 commented 5 years ago

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

dfabulich commented 5 years ago

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 commented 5 years ago

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>.