![中处理滚动动画]( "中处理滚动动画")
本文介绍了在 React 中处理滚动动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在 React 中处理滚动位置的正确方式是什么?由于更好的用户体验，我真的很喜欢平滑滚动.由于在 React 中操作 DOM 是一种反模式，我遇到了一个问题:如何平滑滚动到某个位置/元素?我通常会更改元素的 scrollTop 值，但这是对 DOM 的操作，这是不允许的.
JSBIN
代码:
从'react'导入React；从 'react-dom' 导入 ReactDOM；类 App 扩展了 React.Component {handleClick = e =>{for (让 i = 1; i (this.node.scrollTop = i), i * 2);}};使成为() {const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];返回 (<div ref={节点=>this.node = node} style={{overflow: 'auto', height: '100vh'}}><button onClick={this.handleClick}>点击滚动</button>{[...someArrayToMap，...someArrayToMap，...someArrayToMap，...someArrayToMap，...someArrayToMap，...someArrayToMap，...someArrayToMap].map((e, i) => <div key={i}>这里有一些文字</div>)}
);}}ReactDOM.render(, document.getElementById('root'));
如何以 React 方式实现这一目标?
解决方案
你可以只使用 refs 和 scrollIntoView 方法(使用 behavior: 'smooth' 来平滑滚动).它只有几行代码，不需要包.
说这是你想要滚动的地方
<p ref={this.myRef} className="scrollToHere">[1] ...</p>
还有某种按钮
{this.scroll(this.myRef)}} className="footnote">[1]</button>
调用滚动方法
class App 扩展组件 {构造函数(){极好的()this.myRef = React.createRef();滚动(参考){ref.current.scrollIntoView({行为:'平滑'})}}
因为此方法尚未被所有浏览器支持(浏览器支持概述)，您可能想要使用polyfill.
What is the correct way of dealing with scroll position in React? I really like smooth scrolling because of better UX. Since manipulating the DOM in React is an anti-pattern I ran into problem: how to scroll smoothly to some position/element? I usually change scrollTop value of an element, but this is a manipulation on the DOM, which is not allowed.
JSBIN
code:
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'));
How to achieve this in a React way?
解决方案
You can just use refs and the scrollIntoView method (with behavior: 'smooth' for smooth scrolling). It's only a few lines of code and doesn't require a package.
Say this is what you want to scroll to
<p ref={this.myRef} className="scrollToHere">[1] ...</p>
And some sort of button
<button onClick={() => {this.scroll(this.myRef)}} className="footnote">[1]</button>
to call the scroll method
class App extends Component {
constructor() {
super()
this.myRef = React.createRef();
scroll(ref) {
ref.current.scrollIntoView({behavior: 'smooth'})
}
}
EDIT: Because this method is not yet supported by all browsers (overview of browser support), you might want to use a polyfill.
这篇关于在 React 中处理滚动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！