metafizzy / metafizzy/infinite-scroll
Browser back button not working correctly when used with history push
- 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
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