Meteor + overflow-y：滚动使 window.scrollTo 不起作用答案

【问题标题】：Meteor + overflow-y: scroll makes window.scrollTo not workMeteor + overflow-y：滚动使 window.scrollTo 不起作用
【发布时间】：2017-06-29 08:03:57
【问题描述】：

Meteor 在 iphone 上平滑滚动有一个奇怪的问题：

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

这个问题可以通过添加这个 CSS sn-p 轻松解决

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 不再起作用，我使用 react-router 在路由更改时滚动到顶部：

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

这似乎与弄乱容器高度有关，所以 scrollTo 不确定顶部在哪里——或者至少这是我目前的理论。

在不放弃在 iphone 上平滑滚动的情况下，有什么好的解决方法吗？

【问题讨论】：

你可以试试document.body.scrollTo(0, 0)。

标签： javascript css reactjs meteor react-router

【解决方案1】：

在 React-Router v4 中，“onUpdate”已被弃用。您可以在“Routes”中使用“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';
    }
}

【讨论】：