Comment empêcher le défilement de la page entière lorsque vous cliquez sur un élément à l'intérieur d'un div défilant ?

Comment faire défiler dans un div défilant

Lorsque vous cliquez sur un élément dans un div défilant, vous pouvez rencontrer un problème où la page entière défile au lieu de simplement le div. Pour résoudre ce problème, suivez les étapes suivantes :

1. Calculez le décalage vertical de l'élément souhaité par rapport à son div parent :

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

2. Utilisez scrollTop pour faites défiler le div jusqu'à la position spécifiée :

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

Alternativement, pour une implémentation de prototype JS :

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

Cette approche garantit que le div défile pour afficher l'élément souhaité à en haut ou le plus bas possible s'il n'est pas visible par défaut.

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!