Does not work well if scroll-behavior: smooth;

toviszsolt / react-scrollspy

ScrollSpy React Component - Automatically update navigation components based on scroll position to indicate which link is currently active in the viewport.

https://32jhvk.csb.app

MIT License

36 stars 5 forks source link

Does not work well if scroll-behavior: smooth; #4

Closed ghost closed 3 years ago

ghost commented 3 years ago

I had scroll-behavior: smooth; in my CSS:

html {
  scroll-behavior: smooth;
}

With that it breaks and when clicking a link it will go very slowly

toviszsolt commented 3 years ago

Hi there. This is not bug. Please turn off or unset scroll-behavior in css. Scroll behavior is browser specific feature. Have a good one

ghost commented 3 years ago

Hello, I do not want to have a misunderstanding because I never reported is as a bug. I already removed the scroll-behavior from the CSS. I was merely reporting (pointing out) this issue and already gave the solution by removing the scroll-behavior stated earlier. It has weird behavior when having scroll-behavior: smooth; in your css and was hoping maybe there is a solution for it but apparently I came to the wrong place. Have a nice one.

pixelmultiplo commented 9 months ago

Not a great solution, what if i need it? Can confirm this is bugged.

toviszsolt commented 9 months ago

@pixelmultiplo not bugged, scroll-behavior: smooth not supported, because, package has built-in scroll behavior. Find the link to the demo in the repo description to codesandbox and try it there.

toviszsolt commented 9 months ago

Last note for anyone with questions about the scroll-behavior CSS property: (I hope it will be clear to everyone...)

When this package was written, iOS did not support the scroll-behavior: smooth CSS property, so the smooth behavior had to be written manually. This built-in solution is a future proof solution.
Since there is a built-in scroll behavior, any overwriting from the CSS side can result in strange things, as 2 separate scroll handlers take effect at the same time. To avoid this, either don't use the scroll-behavior: smooth CSS property, or disable it on the package-controlled scroll boxes.