Comment puis-je faire défiler automatiquement un div vers un élément spécifique sans faire défiler la page entière ?

Défilement vers un élément dans un Div

Vous avez pour objectif de programmer un div défilé pour qu'il défile automatiquement jusqu'à un élément qu'il contient en cliquant. L'utilisation de scrollIntoView(true) semble faire défiler toute la page, vous laissant perplexe.

Solution :

Pour résoudre ce problème, vous devez déterminer le décalage supérieur du élément cible par rapport à son parent, le conteneur div défilant. Ceci est réalisé grâce à :

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

Le topPos contient désormais la distance en pixels entre le haut du div et l'élément que vous souhaitez voir.

Ensuite, demandez au div de faire défiler jusqu'à cet emplacement en utilisant scrollTop :

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

Dans Prototype JS, cela se traduit par :

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

Cette action fait défiler le div pour aligner l'élément spécifié en haut, ou aussi près que possible si le défilement ne fonctionne pas. Cela ne permet pas d'atteindre le sommet.

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!