react-scroll
react-scroll copied to clipboard
'smooth: true' causes scrollTo to not work in Chrome, Edge, but works on Firefox
scroller.scrollTo(scrollRef.current[nextPage].props.name, {
duration: 800,
delay: 0,
smooth: true
});
doesn't work in chrome and edge. works on firefox though.
When I remove smooth: true, it works on every browser. but it's ugly
I have the same problem,when I use smooth,Cannot roll to specified position
Could you provide a plunkr/codepen to demonstrate the issue?
it can not work
Roll inside the container,The height of the container is fixed, and the page will scroll automatically after loading
you can see this,https://codesandbox.io/s/container-forked-c3kse?file=/src/index.js
@rjworks Would it work if you wrote it like this instead.
scroller.scrollTo("scroll-to-element", {
duration: 800,
delay: 0,
smooth: "easeInOutQuart",
offset: offset
});
I had the same problem. But in my case I had a CSS property like this:
html { scroll-behavior: smooth }
When I removed this line it worked correctly.
Yes, it seems react-scroll doesn't work as expected when the scroll-behavior
is set in the CSS.
Since it is not always an option, to remove the scroll-behavior from the CSS (because it is quite handy) - is there a way to work around this using react-scroll?
For me, scroll-behavior: smooth
also caused the issue.
Maybe it's better to have this documented.