React.js: Stop render from scrolling to top of page
@floydophone answered this one on Twitter.
https://twitter.com/floydophone/status/608129119025561600
@bengrunfeld @reactjs you forgot
preventDefault()
on your link handlers
If render trigger scrolling to the top it usually means some UI component is changing its dimension because of the state, this can be fixed by adding a minimum width/height
Wanted to add here for those who are not using anchor tags, preventDefault
will not save you. As bizarre as it is, for me it was related to rendering my child components inside a div
with
display:table > display:tablecell
For some reason the child component's scroll position is lost in this situation when there is any re-render. Problem vanished when I switched to flexbox (display:flex).
Ok if anyone read this , in my case the problem wasn't any of above. You must try first suggestions on above any way. I did everything including preventDefault()
but didn't help me. The problem was ; using styled-components
. Because, styled-components give a random classname every render. So it resets scroll. I gave the class name from css and solved my problem.