htmx icon indicating copy to clipboard operation
htmx copied to clipboard

Keep "infinite scroll" snapshot instead of hx-push-url

Open tudoanh opened this issue 2 years ago • 2 comments

The problem:

When user perform scroll to end of page, I fetch more data from URL /products/?infinite=True, then hx-push-url=/products/?page={{current_page}}.

But after user click to see an item detail, then navigate back, the content only shows last page, not the whole history as I expected.

Example:

User access ?page=1, then ?page=2, items from page 2 will append to the end. The content of page 1 still show.

After user access an item and then back, the page is show only content from page 2, the content of page 1 has been disappeared.

And when user navigate back, the scroll position is not right. It's always scrolling to the top of the page.

tudoanh avatar Jan 03 '23 09:01 tudoanh

And when user navigate back, the scroll position is not right. It's always scrolling to the top of the page.

I've had the same issue. Especially if using infinite scroll upwards, rather than downwards.

TomBeckett avatar Jan 26 '23 10:01 TomBeckett

Solution: Do not use hx-push-url when infinite loading pagination. Just push the main URL once. That will keep the history right.

But it's still scroll to the top.

tudoanh avatar May 12 '23 09:05 tudoanh