Hay un div con un montón de tramos dentro de él así:
<div id="wordDisplayWrapper"> {words.map((word, i) => { if (i === idx) { return ( <span key={i} className={"currentWord"}> {word} </span> ); } else { return ( <span key={i} className={classes[i] || "word"}> {word} </span> ); } })} </div>; Los intervalos se desbordarán del div, y el desbordamiento se ha establecido en overflow-y: hidden; , este es el CSS:
#wordDisplayWrapper { height: 5.5em; overflow-y: hidden; outline: 1px solid orange; }La palabra actual cambia y, a medida que se indexa hacia adelante, desborda el div. Me gustaría que el div se desplace automáticamente a esta palabra actual, pero no he podido encontrar una manera de hacerlo. ¿Cómo debo hacer esto en React?
¡Gracias!
Puede apuntar al elemento para desplazarse usando un selector html / refs y llamar a scrollIntoView() . Llama scrollIntoView(true) si quieres que la palabra actual esté en la parte superior del contenedor.
Más información sobre Element.scrollIntoView : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Si desea una transición para el desplazamiento, agregue scroll-behavior: smooth; regla css al contenedor div.
Acerca scroll-behavior : https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior