Comment faire défiler jusqu'à un élément dans React ?-js tutoriel-php.cn

Comment faire défiler jusqu'à un élément dans React ?

Linda Hamilton

Libérer： 2024-11-14 09:37:02

original

869 Les gens l'ont consulté

How to Scroll to an Element in React?

Comment faire défiler jusqu'à un élément ?

Vous souhaitez que votre widget de chat se concentre automatiquement sur le dernier message lorsque de nouveaux messages sont chargés. Pour y parvenir, vous devez créer une référence dynamique pour chaque message et utiliser une fonction de défilement pour faire défiler jusqu'au dernier élément.

Voici comment procéder :

React 16.8 , Composant fonctionnel

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>
    </>
  );
};

Copier après la connexion

React 16.3 , Composant de classe

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.
}

Copier après la connexion

Composant de classe - Réf callback

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.
}

Copier après la connexion