Comment faire défiler les éléments dans les divisions délimitées en JavaScript ?

Défilement jusqu'aux éléments dans des divisions délimitées

Dans le développement Web, le défilement dans les éléments d'une page peut être crucial pour l'expérience utilisateur. Un problème courant auquel les développeurs sont confrontés est le défilement jusqu'aux éléments d'un div défilé.

Problème :

Un utilisateur souhaite cliquer sur un élément dans un div défilé et l'avoir automatiquement. faites défiler pour voir. Cependant, en utilisant la méthode JavaScript suivante :

document.getElementById(chr).scrollIntoView(true);

La page entière défile, y compris le div lui-même. Ce comportement n'est pas souhaitable.

Solution :

Pour faire défiler uniquement le div pour afficher l'élément cible, vous devez calculer le décalage supérieur de l'élément par rapport à son parent (le conteneur div défilé).

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

La variable topPos contient désormais la distance entre le haut du div défilant et l'élément cible.

Pour faire défiler le div jusqu'à cette position, utilisez scrollTop :

document.getElementById('scrolling_div').scrollTop = topPos;

Prototype Framework :

Si vous utilisez le framework Prototype JS, vous pouvez utiliser le code suivant :

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

Cette méthode fera défiler le div de sorte que l'élément cible soit exactement en haut, ou descendra le plus bas possible pour être visible dans le div.

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!