search

preactjs / wmr

👩‍🚀 The tiny all-in-one development tool for modern web apps.
https://wmr.dev/
MIT License
4.92k stars 109 forks source link

Instant scrolling when changing pages #880

Open RodrigoJuliano opened 2 years ago

RodrigoJuliano commented 2 years ago

Is your feature request related to a problem? Please describe. If you enable smooth scrolling via css styles, forward navigation makes a animated smooth scroll to the top of the page when loading the page.

Describe the solution you'd like I think this scroll should always be instantaneous.

One way to get this is by passing the 'behavior' parameter to the scroll function. Change this: https://github.com/preactjs/wmr/blob/9b425c5695509802ef7eee97d5d979cb48df450b/packages/preact-iso/router.js#L122 To:

 if (wasPush) scrollTo({ top: 0, behavior: 'instant' });

Additional context Relates to #496

RodrigoJuliano commented 2 years ago

A complementary suggestion: If the navigation link includes a hash link, then scroll to the element with that id instead of the top

developit commented 2 years ago

I thought the default behavior of scrollTo(0,0) was instant? Are you seeing this on a specific browser?

RodrigoJuliano commented 2 years ago

I use chrome. The default behavior is 'auto' which should be instantaneous according to the documentation, but in practice it is not. https://github.com/mdn/content/issues/2719

developit commented 2 years ago

When I test this locally, I am not seeing smooth scrolling - it's instant. Maybe you have a script or extension that is intercepting this and applying smooth scrolling?

RodrigoJuliano commented 2 years ago

I tested it with an empty project and on Edge, and it still happened. Did you add scroll-behavior: smooth; ?

developit commented 2 years ago

Ah - sorry, I had missed that you were asking for this as a way to override global scrolling-behavior:smooth.