'smooth: true' causes scrollTo to not work in Chrome, Edge, but works on Firefox

[rjworks]

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

[Deadpool957]

I have the same problem，when I use smooth，Cannot roll to specified position

[fisshy]

Could you provide a plunkr/codepen to demonstrate the issue?

[Deadpool957]

it can not work

[Deadpool957]

Roll inside the container，The height of the container is fixed, and the page will scroll automatically after loading

[Deadpool957]

you can see this,https://codesandbox.io/s/container-forked-c3kse?file=/src/index.js

[fisshy]

@rjworks Would it work if you wrote it like this instead.

scroller.scrollTo("scroll-to-element", {
      duration: 800,
      delay: 0,
      smooth: "easeInOutQuart",
      offset: offset
    });

[Calisto184AC0]

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.

[saschadiercks]

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?

[danny-dang]

For me, scroll-behavior: smooth also caused the issue.

Maybe it's better to have this documented.