React scrollTo / 获取元素/组件的 Y 位置

Question

以下代码滚动到顶部并接受延迟：

const ScrollToTop = React.createClass({
  getInitialState: function () {
    return {intervalId: 0};
  },

  scrollStep: function () {
    const top = 0;

    if (window.pageYOffset === top) {
      clearInterval(this.state.intervalId);
    }
    window.scroll(top, window.pageYOffset - this.props.scrollStepInPx);
  },

  scrollToTop: function (event) {
    event.preventDefault();

    const intervalId = setInterval(this.scrollStep, this.props.delayInMs);

    this.setState({intervalId: intervalId});
  }
});

如何使用主导航实现类似的功能？有没有办法计算元素的偏移量？然后我可以通过 this 而不是传递 top。

Answer 1

使用库来实现。

看看react-scroll。这是一个基本滚动和平滑滚动的指令。

Live example 可用。如果这对你有用，read the usage guidelines。