Tengo una lista desplazable de elementos en una página. El usuario puede realizar una solicitud PUT y actualizar uno de los elementos. Si la solicitud PUT tiene éxito, realizo otra solicitud de red para obtener la lista actualizada. De esta lista, quiero establecer inmediatamente el elemento actualizado recientemente como activo.
Tengo el código para hacer todo esto con éxito, sin embargo, el desplazamiento no solo ocurre en mi lista, sino que también se desplaza en toda la página.
Mi lista se ve así:
<div className={cx(styles.body)}> <div className={styles.squadList}> {squadList.map((squad, index) => { const isSelected = squad.squadId === squadSelected.squadId ? "selected" : null; return ( <div className={cx(styles.item, { [styles["item--selected"]]: isSelected, })} key={index} id={`squad-list-item-${squad.squadId}`} > <div className={styles.details}> <span className={styles.title}> {squad.squadName} </span> <span className={styles.members}> {squad.memberCount} members {renderAdminIcon(squad, isSelected)} </span> </div> </div> ); })} </div> </div>Después de la solicitud de venta exitosa y mi recuperación, ejecuto
const tgtElement = document.getElementById( `squad-list-item-${squadSelected.squadId}` ); tgtElement.scrollIntoView();Esto funciona y desplaza el elemento deseado a la parte superior de la lista, sin embargo, también desplaza un poco la página completa.
para lograrlo, debe desplazar el div hasta el elemento deseado.
Primero obtenga el elemento offsetTop y luego configure el desplazamiento superior div para que coincida con el desplazamiento superior del elemento.
const divToScroll = document.getElementById("divToScrollId"); const tgtElement = document.getElementById( `squad-list-item-${squadSelected.squadId}` ); // Here where the magic happens divToScroll.scrollTop = tgtElement.offsetTop;Esto debería funcionar siempre que el div para desplazarse tenga la posición css establecida en relativa.