Question

因此，我研究了https://reacttraining.com/react-router/web/guides/scroll-restoration并在我的TypeScript代码中实现了以下内容：

import * as React from "react";
import { RouteComponentProps, withRouter } from "react-router";

class ScrollToTop extends React.Component<RouteComponentProps> {
  componentDidUpdate(prevProps: RouteComponentProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(ScrollToTop);

在我的index.tsx中用作：

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <ScrollToTop>
        <App />
      </ScrollToTop>
    </Router>
  </Provider>,
  document.getElementById("root") as HTMLElement
);

但是，我没有滚动到顶部-任何帮助将不胜感激！

Answer 1

结果是我有一些讨厌的CSS阻止了呼叫：

overflow-y: scroll;

-ms-overflow-style: none; // IE 10+
  overflow: -moz-scrollbars-none; // Firefox

::-webkit-scrollbar {
    display: none; // Safari and Chrome
  }

无法滚动到浏览器窗口顶部

1 个答案: