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 :
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> </> ); };
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 }
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 }
É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; }
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} />; };
Au sein du composant ChildComp :
const ChildComp = (props) => { return <div ref={props.refProp} />; };
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!