Comment faire défiler jusqu'à un élément spécifique à l'intérieur d'un div défilant ?

Comment localiser et faire défiler jusqu'à un élément dans un div défilant

Lorsque vous travaillez avec des divs défilants, il est souvent nécessaire de faire défiler jusqu'à un div spécifique. élément dans le div lorsqu’un événement se produit. Cependant, la simple utilisation de la fonction scrollIntoView sur l'élément lui-même peut entraîner un comportement inattendu, tel que le défilement de la page entière.

Pour résoudre ce problème, les étapes suivantes peuvent être suivies :

Obtenez le décalage supérieur de l'élément cible :

Calculez la distance verticale entre le haut de l'élément cible et le haut de son conteneur div défilant parent. Cette valeur est connue sous le nom de décalage supérieur :

<code class="javascript">var targetElement = document.getElementById('element_within_div');
var topOffset = targetElement.offsetTop;</code>

Définissez la position de défilement du div :

Utilisez la propriété scrollTop du div défilant pour définir le défilement position vers le décalage supérieur de l'élément cible :

<code class="javascript">document.getElementById('scrolling_div').scrollTop = topOffset;</code>

Cela fera défiler le div de sorte que l'élément cible soit en haut, ou aussi près du haut que possible dans la zone visible du div.

Alternativement, si vous utilisez le framework Prototype JS, le code suivant peut être utilisé :

<code class="javascript">var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];</code>

En suivant ces étapes, vous pouvez vous assurer que le div défilant se déplace en douceur pour afficher l'élément spécifié. dans son contenu, en évitant le défilement involontaire des pages.

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!