Question

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

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

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

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

如果没有放弃在iphone上顺利滚动，是否有一个很好的解决方法？

Answer 1

在React-Router v4＆＃34; onUpdate＆＃34;折旧。您可以使用＆＃34; onEnter＆＃34;属于＆＃34;路线＆＃34;。

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

还需要修改你的＆＃34; handlePageChange＆＃34;功能如下：

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

Meteor + overflow-y：滚动使window.scroll不起作用

1 个答案: