Maison > interface Web > js tutoriel > le corps du texte

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

Mary-Kate Olsen
Libérer: 2024-11-25 10:51:12
original
320 Les gens l'ont consulté

How to Scroll Automatically to a Specific Element in React?

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

Problème :

Dans un widget de chat, les nouveaux messages devraient automatiquement faire défiler la vue à mesure que l'utilisateur fait défiler vers le haut. Cependant, le curseur reste fixe en haut lors du chargement de nouveaux messages, ce qui rend difficile la visualisation des derniers.

Solution :

Pour faire défiler jusqu'à un élément spécifique lorsque de nouveaux messages sont ajoutés, suivez ces étapes :

React 16.8, composant fonctionnel

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>
    </>
  );
};
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 - Rappel de référence

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

Éviter les références de chaîne :

Les références de chaîne sont déconseillées en raison des performances problèmes, manque de composabilité et suppression potentielle dans le futur React versions.

Facultatif : Animation de défilement fluide :

Pour une expérience de défilement fluide, ajoutez le CSS suivant à l'élément html :

html {
  scroll-behavior: smooth;
}
Copier après la connexion

Passer une référence à un enfant :

Pour attacher une référence à un élément DOM spécifique dans un composant enfant :

const MyComponent = () => {
  const myRef = useRef(null);
  return <ChildComp refProp={myRef} />;
};
Copier après la connexion

Au sein du composant ChildComp :

const ChildComp = (props) => {
  return <div ref={props.refProp} />;
};
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal