Meteor + переполнение-у: прокрутка делает window.scrollTo не работает

Question

Метеор имеет нечетное проблема с плавной прокрутки на айфонов:

https://github.com/meteor/meteor/issues/3402

Эта проблема может быть легко исправить, добавив этот CSS сниппет

https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

html, body { 
    overflow-y: scroll; /* has to be scroll, not auto */ 
    -webkit-overflow-scrolling: touch; 
} 

однако, как только вы добавить переполнение:

overflow-y: scroll; /* has to be scroll, not auto */ 

затем Javascript scrollTo больше не работает, что я использую с среагировать-маршрутизатор, чтобы перейти к началу на изменение маршрута:

const scrollToTop =() => { 
    window.scrollTo(0, 0) 
    if ('scrollRestoration' in history) { 
     history.scrollRestoration = 'manual'; 
    } 
} 

кажется, что-то делать с портя контейнер высота, поэтому scrollTo не уверен, где находится верх - или, по крайней мере, это моя нынешняя теория.

Есть ли хорошее решение для этого, не отказываясь от гладкой прокрутки на iphones?

Answer 1

В режиме React-Router v4 «onUpdate» амортизируется. Вы можете использовать свойство «onEnter» в «Маршрутах».

<Router history={browserHistory}> 
    <Route path="/" component={App} > 
    <IndexRoute component={Home} /> 
    <Route path="/contact-us" component={ContactUs} onEnter={handlePageChange}/> 
    </Route> 
</Router> 

необходимо также изменить вашу функцию "handlePageChange", как показано ниже:

const handlePageChange =() => { 
    window.scrollTo(0, 0); 
    if ('scrollRestoration' in history) { 
     history.scrollRestoration = 'manual'; 
    } 
}