React でチャットウィジェットの一番下までスクロールするにはどうすればよいですか?-jsチュートリアル-php.cn

React でチャットウィジェットの一番下までスクロールするにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-16 00:50:02

オリジナル

1016 人が閲覧しました

How to Scroll to the Bottom of a Chat Widget in React?

React で要素にスクロールする方法

この記事では、新しいメッセージを受信したときにチャットウィジェットのスクロールバーが上部に固定されたままになるという一般的な問題に対処します負荷。私たちの目標は、前の配列の最後のメッセージ要素にスクロールバーをフォーカスすることです。

解決策

この問題を解決するには、以下を行う必要があります。

動的を作成するメッセージ要素をレンダリングするコンポーネントにインデックスを渡すことで refs を実行します。
目的の場所までスクロールする適切なスクロール関数を利用します。 element.

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

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

  const executeScroll = () => myRef.current.scrollIntoView(); // Scroll to the element

  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(); // Scroll to the element
}

ログイン後にコピー

クラスコンポーネント - 参照コールバック:

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

  executeScroll = () => this.myRef.scrollIntoView(); // Scroll to the element
}

ログイン後にコピー

重要な注意事項: