Window.scrollTo 在 React 中未定义

Question

I want to do a simple window.scrollTo(0,0) on a button click. I want it to just move the window to the top. Unfortunately the window.scrollTo(0,0) does nothing with the GUI.

I suspect it has something to do with React and the structure of the application.

scrollToTop: function() {
    window.scrollTo(0, 0);
}

Do I have to do it in another way with react or is there something I have missed?

Answer 1

I found that the problem was that I had a fixed position on my main container.

main-container {
   position: fixed; // Should use either static or relative
}

This made the window keep its position "fixed", which meant that window.scrollTo() would not change the position.

So be careful using position: fixed; unless you want the element to stick in the viewport. (like a header)

Answer 2

I have the same issue and found out this CSS code will also block the scrollTo() function.

body, html {
    overflow-x: hidden;
}