首页 文章

在react.js中渲染后滚动到页面顶部

提问于
浏览 次
74

我有一个问题，我没有想法，如何解决 . 在我的react组件中，我显示了一长串数据，底部显示了很少的链接 . 点击任何链接后，我用新的链接集合填写列表，需要滚动到顶部 .

问题是 - 如何滚动到顶部 after 新集合被渲染？

'use strict';

// url of this component is #/:checklistId/:sectionId

var React = require('react'),
  Router = require('react-router'),
  sectionStore = require('./../stores/checklist-section-store');


function updateStateFromProps() {
  var self = this;
  sectionStore.getChecklistSectionContent({
    checklistId: this.getParams().checklistId,
    sectionId: this.getParams().sectionId
  }).then(function (section) {
    self.setState({
      section,
      componentReady: true
    });
  });

    this.setState({componentReady: false});
 }

var Checklist = React.createClass({
  mixins: [Router.State],

  componentWillMount: function () {
    updateStateFromProps.call(this);
  },

  componentWillReceiveProps(){
    updateStateFromProps.call(this);
   },

render: function () {
  if (this.state.componentReady) {
    return(
      <section className='checklist-section'>
        <header className='section-header'>{ this.state.section.name }   </header>
        <Steps steps={ this.state.section.steps }/>
        <a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
          Next Section
        </a>
      </section>
    );
    } else {...}
  }
});

module.exports = Checklist;
scroll reactjs render

14 回答

  • 152

    我通过添加：解决了这个问题：

    componentDidUpdate() {
  ReactDOM.findDOMNode(this).scrollTop = 0
},
    回复于
  • 5

    你可以使用这样的东西 . ReactDom用于反应.14 . 只是反应 .

    componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }
    回复于
  • 0

    最后..我用过：

    componentDidMount() {
  window.scrollTo(0, 0)
}
    回复于
  • 12

    这可能，也可能应该使用refs来处理：

    “...你可以使用ReactDOM.findDOMNode作为”逃生舱“但我们不推荐它，因为它打破了封装，几乎在所有情况下都有更清晰的方法在React模型中构建你的代码 . ”

    示例代码：

    class MyComponent extends React.Component {
    componentDidMount() {
        this._div.scrollTop = 0
    }

    render() {
        return <div ref={(ref) => this._div = ref} />
    }
}
    回复于
  • 3

    您可以在路由器中执行此操作：

    ReactDOM.render((
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
     <Route path='/' component={App}>
        <IndexRoute component={Home}></IndexRoute>
        <Route path="/about" component={About}/>
        <Route path="/work">
            <IndexRoute component={Work}></IndexRoute>
            <Route path=":id" component={ProjectFull}></Route>
        </Route>
        <Route path="/blog" component={Blog}/>
    </Route>
 </Router>
), document.getElementById('root'));

    onUpdate={() => window.scrollTo(0, 0)} 把滚动顶部 . 有关更多信息，请访问：http://codepen.io/Yuschick/post/react-reset-scroll-position-when-changing-routes

    回复于
  • 8

    我正在使用react-router ScrollToTop组件，其代码在react-router docs中描述

    https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top

    我正在更改单个Routes文件中的代码，之后不需要在每个组件中更改代码 .

    示例代码 -

    第1步 - 创建ScrollToTop.js组件

    import React, { Component } from 'react';
import { withRouter } from 'react-router';

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

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

export default withRouter(ScrollToTop)

    第2步 - 在App.js文件中，在 <Router 之后添加ScrollToTop组件

    const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)
    回复于
  • 0

    这是另一种方法，允许您选择希望窗口滚动位置重置为哪个已安装的组件，而不会大量复制ComponentDidUpdate / ComponentDidMount .

    下面的示例是使用ScrollIntoView（）包装Blog组件，因此如果在安装Blog组件时路由发生更改，则HOC的ComponentDidUpdate将更新窗口滚动位置 .

    您可以轻松地将其包裹在整个应用程序上，这样在任何路径更改时，它都会触发窗口重置 .

    ScrollIntoView.js

    import React, { Component } from 'react';
import { withRouter } from 'react-router';

export default WrappedComponent => {
  class ResetWindowScroll extends Component {
    componentDidUpdate = (prevProps) => {
      if(this.props.location !== prevProps.location) window.scrollTo(0,0);
    }

    render = () => <WrappedComponent {...this.props} />
  }
  return withRouter(ResetWindowScroll);
}

    Routes.js

    import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from '../components/App';
import About from '../components/pages/About';
import Blog from '../components/pages/Blog'
import Index from '../components/Landing';
import NotFound from '../components/navigation/NotFound';
import ScrollIntoView from '../components/navigation/ScrollIntoView';

 export default (
    <Route path="/" component={App}>
        <IndexRoute component={Index} />
        <Route path="/about" component={About} /> 
        <Route path="/blog" component={ScrollIntoView(Blog)} />
        <Route path="*" component={NotFound} />
    </Route>
);

    上面的示例效果很好，但如果您已迁移到 react-router-dom ，则可以通过创建包装组件的渲染道具来简化上述操作 .

    再一次，你也可以轻松地将它包装在你的路线上（只需将 componentDidMount 方法改为上面写的 componentDidUpdate 方法示例代码，以及用 withRouter 包装 ScrollIntoView ） .

    工作示例：https://codesandbox.io/s/qq4x5x43k9（仅点击主页更新窗口位置）

    containers/ScrollIntoView.js

    import { PureComponent, Fragment } from "react";

class ScrollIntoView extends PureComponent {
  componentDidMount = () => window.scrollTo(0, 0);

  render = () => this.props.children
}

export default ScrollIntoView;

    components/Home.js

    import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";

export default () => (
  <ScrollIntoView>
    <div className="container">
      <p>
        Sample Text
      </p>
    </div>
  </ScrollIntoView>
);
    回复于
  • 31

    这是唯一对我有用的东西（使用ES6类组件）：

    componentDidMount() {
  ReactDOM.findDOMNode(this).scrollIntoView();
}
    回复于
  • 4

    在React Routing中，存在如下问题：如果我们重定向到新路由，则它不会自动将您带到页面顶部 .

    即使我确实有同样的问题 .

    我刚刚将单行添加到我的组件中，它就像黄油一样 .

    componentDidMount() {
    window.scrollTo(0, 0);
}

    参考：https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top

    回复于
  • 0

    所有这些都不适合我 - 不知道为什么但是：

    componentDidMount(){
    document.getElementById('HEADER').scrollIntoView();
}

    工作，其中HEADER是我的 Headers 元素的ID

    回复于
  • 5

    如果您为 mobile 执行此操作，至少使用chrome，您将在底部看到一个白色条 .

    当URL栏消失时会发生这种情况 . 解：

    更改高度/最小高度的css：100％到高度/最小高度：100vh .

    https://developers.google.com/web/updates/2016/12/url-bar-resizing

    回复于
  • 40

    此代码将导致 scroll 上的平滑行为：

    <div onClick={() => {
   ReactDOM.findDOMNode(this.headerRef)
      .scrollIntoView({behavior: "smooth"});
                }} 
  className='go-up-button' >
</div>

    您可以在scrollIntoView（）内传递其他参数可以使用以下语法：

    element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

    alignToTop可选是一个布尔值：

    If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

    scrollIntoViewOptions可选是具有以下属性的Object：

    *behavior* Optional
    Defines the transition animation.
    One of "auto", "instant", or "smooth". Defaults to "auto".
*block* Optional
    One of "start", "center", "end", or "nearest". Defaults to "center".
*inline* Optional
    One of "start", "center", "end", or "nearest". Defaults to "nearest".

    更多细节可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

    回复于
  • 1

    这样的东西对我有用：

    <div ref="scroller" style={{height: 500, overflowX: "hidden", overflowY: "auto"}}>
      //Content Here
</div>

    然后在任何处理更新的函数中：

    this.refs.scroller.scrollTop=0
    回复于
  • 0

    所有解决方案都讨论了在 componentDidMount 或 componentDidUpdate 上添加滚动但是与DOM相关 .

    我做了所有这些并没有奏效 .

    所以，想出一些对我来说很好的方法 .

    在 Headers 上添加了componentDidUpdate（）{window.scrollTo（0,0）}，该 Headers 超出了<Switch> </ Switch>元素 . 只需在应用程序中免费 . 作品 .

    我也找到了一些ScrollRestoration的东西，但我现在很懒 . 而现在要保持它"DidUpdate"方式 .

    希望能帮助到你！

    注意安全

    回复于

相关问题