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
}

クラスコンポーネント - 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
}

Avoid String Refs:

文字列参照はパフォーマンスの問題のため推奨されません。構成可能性が欠如しており、将来の React リリースでは削除される可能性があります。

オプション: スムーズ スクロール アニメーション:

スムーズなスクロール エクスペリエンスを実現するには、次の CSS を html 要素に追加します。 :

html {
  scroll-behavior: smooth;
}

Ref を a子:

子コンポーネント内の特定の DOM 要素に参照をアタッチするには:

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

ChildComp コンポーネント内:

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

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