React で要素までスクロールするにはどうすればよいですか?

要素までスクロールするにはどうすればよいですか?

新しいメッセージが読み込まれたときに、チャット ウィジェットが自動的に最後のメッセージにフォーカスするようにしたいと考えています。これを実現するには、メッセージごとに動的な参照を作成し、スクロール関数を使用して最後の要素までスクロールする必要があります。

その方法は次のとおりです:

React 16.8 、機能コンポーネント

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView(); // run this function from an event handler or an effect 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.
}

クラスコンポーネント - Ref コールバック

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 コンポーネントではなく、DOM 要素に ref を渡します。
• スムーズなスクロール アニメーションを有効にするには、CSS を追加します。

以上がReact で要素までスクロールするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。