在React中处理滚动动画

Question

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

JSBIN

码:

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'));

如何以React方式实现这一目标？

Answer 1

您可以使用refs和scrollIntoView方法(behavior: 'smooth'用于平滑滚动).它只有几行代码,不需要包.

说这是你要滚动的内容

<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'})
  }
}

编辑:因为所有浏览器尚不支持此方法(浏览器支持概述),您可能希望使用polyfill.

Answer 2

window.scroll({top: 0, left: 0, behavior: 'smooth' }) 为我工作。

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

或使用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()
  })()
}

通过此动态polyfill，除非浏览器支持平滑滚动，否则将通过ajax加载程序包。

polyfill-modern 是一个任意的块名称，它暗示webpack编译器将软件包组合在一起，以减少服务器请求的数量。

Answer 3

最简单的方法： -

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

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

Answer 4

这是一个使用钩子的小型无依赖解决方案

const useSmoothScrollTo = id => {
    const ref = useRef(null)
    useEffect(() => {
        const listener = e => {
            if (ref.current && location.hash === id) {
                ref.current.scrollIntoView({behavior: 'smooth'})
            }
        }
        window.addEventListener('hashchange', listener, true)
        return () => {
            window.removeEventListener('hashchange', listener)
        }
    }, [])
    return {
        'data-anchor-id': id,
        ref
    }
}

你像这样使用它：

export const FeaturesSection = () => {
    const bind = useSmoothScrollTo('#features')
    return (
        <section {...bind} className={classes.features}>
        ...
        </section>
    )
}      

然后你的应用程序中的其他任何地方你只需要做

<a href="#features">Go to Features</a>

显然，与上述相同的警告适用于.scrollIntoView({behavior: 'smooth'})

Answer 5

已经有几个很好的软件包可以为您处理这个问题：

https://github.com/fisshy/react-scroll -演示

https://www.npmjs.com/package/react-scroll-to-component 简单滚动到组件

希望这可以帮助！