search

RevoTale / next-scroll-restorer

Scroll restoration for NextJs apps built with `app` directory. Fixed bugs that NextJs team do not fix.
MIT License
27 stars 1 forks source link

Support scrollable non-body containers. #51

Open ivan-kleshnin opened 6 months ago

ivan-kleshnin commented 6 months ago

Hello! This library works fine for default (body) scrollable container. Hovewer, it's often necessary to have a combination of scrollable container and a sticky header. Or something else for that matter. Unless I messed up, the following does not work with next-scroll-restorer:

export function Shell() {
  // using Tailwind classes, hopefully it's clear
  return <div className="overflow-auto max-h-screen">
  ...
  </div>
}

Here's the same problem discussed in Remix framework community and some yet unofficial solutions to it.

Context

I'm trying to auto-restore scroll position on a user search page with an infinite scroll (powered by React-Query). I'm clicking on a Profile Detail link, then I'm clicking on the native Back button in Chrome. My own ad-hoc restorer works fine so there's no structural issue that would block the desired behavior.

l-you commented 6 months ago

Hello! I have some ideas on how to implement it but will do so later. If you'd like to speed up the process, feel free to open a pull request. However, please ensure that you include tests for this particular case.

javascripter commented 1 month ago

https://github.com/javascripter/next-scroll-restoration I ended up not using custom scrolling elements for our website so I'm not using it yet in production but here's my attempt at it when I was trying to solve it (feel free to take implementation ideas from my library if applicable). Using scroll events to discover custom scrolling elements automatically seems to be reliable in dynamic websites.

Current known problem in my implementation is when navigating to the same href in different history stacks it wrongly restores scrolls, since my implementation uses location.pathname as the history state key.

next-scroll-restorer seems to cover lots of edge cases quite well so if non-body container scroll restoration gets implemented in this library it'd be pretty awesome!