Opt out of scrolling on hash change

[elliottgrieco-toast]

I would like to opt out of scrolling in hash change. I am working with a code base which has a feature which controls the hash history external based upon the scrolling position. Having an effect which responds to the history and scrolls to the dom element is a sensible default, but would like to opt out of possible!

PR already created - #1105 , looking for discussion if this feature would be valuable to others. Right now I'm handling this in my project by rewriting the entire RouterProvider, which is not ideal.

[SeanCassiere]

Hey, I dropped a comment on your PR.

[elliottgrieco-toast]

Hi all, we are looking for some more concrete use-cases where this feature/API would solve a problem for developers. Are there cases for folks where the default assumption to scroll in all history hash changes is problematic for people's real world applications? If so, how?

[joshuaslate]

I am running into a similar issue.

I am trying to implement a table of contents sidebar for an API documentation site that contains anchor links (e.g., to="#Auth") to the various sections of documentation (all in the same page). When clicking on one of the table of contents links, having the browser scroll down to the anchor that matches the hash is working as expected. The part I'm running into some trouble with is when I try to update the hash as a result of the user scrolling down the content part of the site. When I try to update the hash in the URL, the browser scrolls to the anchor element, but I'd really like to avoid that behavior so the user can scroll at their own pace. I've tried using navigate, updating the location state using router.buildAndCommitLocation, and even just trying window.location.hash = '#Auth'. All of these result in the hash being updated in the address bar, but they also all take over scrolling. I believe the latter is happening because the history implementation is overwriting window.history to support the router's subscriptions.

Since the original PR was created, it seems the code causing the scroll has moved here:

router/packages/react-router/src/Transitioner.tsx

Line 146 in 35af575

if (router.state.location.hash !== '') {

If I'm understanding correctly, the recommendation from the discussion in the PR that was closed was to try using the Scroll Restoration API. I wasn't able to get that to work either, unfortunately.

Here's a StackBlitz that hopefully minimally demonstrates the issue: https://stackblitz.com/edit/tanstack-router-785cuome?file=src%2Fmain.tsx I also tried using useElementScrollRestoration, but it didn't solve the issue either. (The intersection observer implementation here isn't without issue, but it should be fine to demonstrate the problem I have, I think).