On a page, I have a scrollable list of items that can be updated with a PUT request. Once the update is successful, another network request is made to fetch the updated list. The goal is to automatically highlight the recently updated item in the list.
Although the code successfully accomplishes this task, there is an issue where not only does the list scroll but the entire page also moves somewhat.
The structure of my list is as follows:
<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>
After the successful put request and refetch, the following code is executed:
const tgtElement = document.getElementById(
`squad-list-item-${squadSelected.squadId}`
);
tgtElement.scrollIntoView();
This script successfully scrolls the desired item to the top of the list, but it unfortunately causes the entire page to scroll slightly as well.