如何在 React 中自动滚动到特定元素？

如何自动滚动到特定元素？

问题：

在聊天小部件中，新消息应该自动当用户向上滚动时滚动到视图中。然而，当新消息加载时，滑块仍然固定在顶部，导致很难看到最新消息。

解决方案：

滚动到特定元素添加新消息，请按照以下步骤操作：

React 16.8 ，功能组件

const ScrollDemo = () => {
  const myRef = useRef(null);
  const executeScroll = () => myRef.current.scrollIntoView(); // Run this function to execute scroll
  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};

React 16.3 ，类组件

class ReadyToScroll extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.current.scrollIntoView(); // Run this method to execute scrolling
}

类组件 - 引用回调

class ReadyToScroll extends Component {
  render() {
    return (
      <div ref={(ref) => (this.myRef = ref)}>Element to scroll to</div>
    );
  }

  executeScroll = () => this.myRef.scrollIntoView(); // Run this method to execute scrolling
}

避免字符串引用：

由于性能问题、缺乏字符串引用，不鼓励使用字符串引用可组合性，并可能在未来的 React 版本中删除。

可选：平滑滚动动画：

为了获得平滑的滚动体验，请将以下 CSS 添加到 html 元素：

html {
  scroll-behavior: smooth;
}

将 Ref 传递给子组件：

要将引用附加到子组件中的特定 DOM 元素：

const MyComponent = () => {
  const myRef = useRef(null);
  return <ChildComp refProp={myRef} />;
};

在 ChildComp 组件中：

const ChildComp = (props) => {
  return <div ref={props.refProp} />;
};

以上是如何在 React 中自动滚动到特定元素？的详细内容。更多信息请关注PHP中文网其他相关文章！