metafizzy / metafizzy/infinite-scroll

Browser back button not working correctly when used with history push

Open
#834 1 comment 10 reactions 0 assignees View on GitHub
feature request
Dominant language
HTML
Stars
7.5k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

I've come across an issue when using the browser back button and the `history: "push"` setting.

I've forked the codepen demo that replicates the issue:
https://codepen.io/robsimpson/pen/aRJrwr
https://codepen.io/robsimpson/full/aRJrwr

I only changed the code in:

```
$('.container').infiniteScroll({
path: getPenPath,
append: '.post',
status: '.page-load-status',
history: 'push',
historyTitle: true,
debug: true,
});
```

Steps to replicate the issue (replicated in Google Chrome):
- Scroll to page 3 (3a - Masonry gets horizontalOrder heading)
- Click the browser back button (this updates the URL but doesn't go back to the previous section on the page or fire off any events in the console with `debug: true` set)
- Click the browser back button again (this keeps the URL the same, goes to the previous section and fires off event in the console)

I've not come across anyone else raise an issue like this so wondering if I've just not set something up correctly or what.

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodePen reproduction and the infiniteScroll configuration using history: 'push', then trace how browser back navigation is handled. Compare the URL, visible section, and debug events after the first and second back-button clicks. Done means the first back action restores the previous section and fires the expected navigation events.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.