如何在 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中文網其他相關文章！