Scroll Position Issue on Initial Post View
I'm working on a project with a masonry-style layout using Tanstack/Virtual, and I've run into a challenge I'd appreciate some help with.
Desired Functionality
- Open posts without navigating away from the main page
- Maintain scroll position when viewing a post
- Restore scroll position when returning to the grid view
Proposed Implementation
- Set
position: fixed on the grid when a post is opened
- Switch between grid and post view CSS styles for seamless transitions
- Utilize window scroll for both grid and post views, avoiding nested scrolling
Key Difference from Modal Approach
Instead of opening posts in a modal with its own scrollbar, I want to leverage the window's scroll for both the grid and individual post views.
Current Issue
When loading the project for the first time:
1. Clicking an item to view a post works as expected
2. Going back to the grid view causes the scroll position to always reset to 0
3. After this initial cycle, subsequent post views and returns to the grid maintain the correct scroll position
Questions
1. Does anyone know why the scroll position resets to 0 only on the first return to the grid view?
2. How can I ensure the correct scroll position is maintained even on the first interaction?
3. Are there any initialization steps I might be missing that could cause this behavior?
4. Has anyone implemented a similar feature and encountered (and solved) this issue?
Any insights, suggestions, or troubleshooting steps would be greatly appreciated. Thank you in advance for your help!
https://codesandbox.io/p/github/gielcobben/remix-shallow/main
https://github.com/gielcobben/remix-shallow/GitHub
GitHub - gielcobben/remix-shallow
Contribute to gielcobben/remix-shallow development by creating an account on GitHub.
0 Replies