Safari force page scroll position to top failed when page refresh

user_8100633 0
Viewed 1208

I am building a website using react to implement.First, we scroll the page to the bottom or middle position.Then we click refresh button in the iphone safari browser，page scroll to the permanent position strangely.I have tried to change the flex layout to float layout and add pageshow event listener to set scrollTop zero using

window.scrollTo(0,0)

.But page still stop at the permanent position in safari mobile.

I guess the problem is the page save the position of last view, but when page fresh, the content of the page is not show completely, and then the page could only scroll to the permanent position.At last, the rest part of the page show out.And the pageshow event has been triggered early before the page scroll to the permanent position. How can I force the page to be scrolled to the top on page refresh except window.scroll? How can I solve this strange behavior of the safari browser?

page-refresh mobile-safari scroll
2 Answers

I have the same issue as you using react on ios safari, the only fixed I found is to use a setTimeout in componentDidMount, but I really don't like this solution

componentDidMount() {
  setTimeout(() => {
        window.scrollTo(0, 0);
    }, 800); 
}

Hope it'll help

user_90985350

use window.scroll(0, 0) instead of window.scrollTo()

user_11939020
Related