Comment faire défiler vers le bas d'un widget de discussion dans React ?

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

Dans cet article, nous aborderons un problème courant où la barre de défilement d'un widget de discussion reste fixe en haut lorsque de nouveaux messages charger. Notre objectif est de concentrer la barre de défilement sur le dernier élément de message du tableau précédent.

Solution

Pour résoudre ce problème, nous devons :

1. Créer une dynamique refs en passant un index au composant rendant les éléments du message.
2. Utilisez une fonction de défilement appropriée qui fait défiler jusqu'à l'élément souhaité.

React 16.8, composant fonctionnel :

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

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

Remarques importantes :

• Évitez d'utiliser des références de chaîne car elles dégradent les performances et la composabilité.
• Pour une animation de défilement plus fluide, ajoutez le CSS suivant :

html {
  scroll-behavior: smooth;
}

• Lorsque vous transmettez une référence à un composant enfant, nommez l'accessoire différemment pour éviter tout conflit avec l'accessoire natif "ref".

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!