在React中处理滚动动画

Question

在React中处理滚动位置的正确方法是什么？我真的很喜欢平滑滚动，因为更好的用户体验。因为在React中操作DOM是一个反模式，所以我遇到了一个问题：如何平滑地滚动到某个位置/元素？我通常会更改元素的scrollTop值，但这是对DOM的操作，这是不允许的。

杰斯宾

代码：

import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  handleClick = e => {
    for (let i = 1; i <= 100; i++) {
      setTimeout(() => (this.node.scrollTop = i), i * 2);
    }
  };

  render() {
    const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return (
      <div ref={node => this.node = node} style={{overflow: 'auto', height: '100vh'}}>
        <button onClick={this.handleClick}>CLICK TO SCROLL</button>
        {
            [...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap].map((e, i) => <div key={i}>some text here</div>)
        }
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

如何以反应的方式实现这一点？

Answer 1

最简单的方法是：-

window.scrollTo({top: 0, left: 0, behavior: 'smooth' });

这个简单的JavaScript代码适用于所有浏览器。

Answer 2

window.scroll（{top： 0，左边： 0，行为：'ski'}）适用于我。

您还需要检查浏览器的兼容性

或者使用polyfill

编辑：为了完整起见，下面是如何动态地用webpack来填充。

if (!('scrollBehavior' in document.documentElement.style)) {
//safari does not support smooth scroll
  (async () => {
    const {default: smoothScroll} = await import(
      /* webpackChunkName: 'polyfill-modern' */
      'smoothscroll-polyfill'
      )
    smoothScroll.polyfill()
  })()
}

通过这种动态多边形填充，除非浏览器支持平滑滚动，否则包将通过ajax加载。

polferd-现代是一个任意的chunk名称，它提示webpack编译器将包组合在一起，以减少对服务器的请求数量。

Answer 3

您只需使用refs和scrollIntoView方法（使用行为：“平滑”进行平滑滚动）。它只需要几行代码，不需要包。

说这是您想要滚动到的内容

<p ref={this.myRef} className="scrollToHere">[1] ...</p>

还有某种按钮

<button onClick={() => {this.scroll(this.myRef)}} className="footnote">[1]</button>

调用scroll方法

class App extends Component {
  constructor() {
    super()
    this.myRef = React.createRef();

  scroll(ref) {
    ref.current.scrollIntoView({behavior: 'smooth'})
  }
}

编辑：因为此方法尚未被所有浏览器支持（浏览器支持概述），所以您可能希望使用多边形填充。