Comment limiter la plage de défilement d'un élément dans un élément parent de taille dynamique ?

Implémentation de limites de hauteur CSS pour les éléments à défilement vertical

Dans une interface interactive, contrôler le comportement de défilement des éléments est essentiel pour garantir l'expérience utilisateur et accessibilité. Un de ces scénarios consiste à limiter la plage de défilement d'un élément au sein d'un élément parent de taille dynamique.

Problème :
Considérons une mise en page dans laquelle nous avons une carte défilante DIV qui se déplace avec le défilement vertical de l'utilisateur, tout en conservant son alignement avec une barre latérale fixe. Cependant, le défilement de la carte s'étend indéfiniment, dépassant la hauteur de la fenêtre d'affichage, empêchant les utilisateurs d'accéder au pied de page.

Solution :
Pour résoudre ce problème et limiter le défilement de la carte, nous pouvons exploiter les techniques CSS et JavaScript.

Tout d'abord, nous définissons une limite de hauteur CSS pour la carte DIV en utilisant le "max-height" propriété. Ceci définit une hauteur maximale que la carte peut atteindre, garantissant qu'elle ne peut pas dépasser la hauteur de l'élément parent.

</p>
<h1>map {</h1>
<p>max-height : 500px; <br>}<br>

Ensuite, nous utilisons JavaScript pour suivre la position de défilement de l'utilisateur et ajustez la position de la carte en conséquence. Au lieu d'utiliser la méthode ".animate()" de jQuery, nous optons pour une manipulation CSS directe pour des raisons de performances.

<br>$(window).scroll(function() {<br> var scrollVal = $(this).scrollTop();<br> if (scrollVal > $("#sidebar").offset().top) {</p>
<pre class="brush:php;toolbar:false">$("#map").css({
  marginTop: (scrollVal - $("#sidebar").offset().top) + "px"
});

} else {

$("#map").css({
  marginTop: "0px"
});

}
});

Dans ce code, on calcule le différence entre la position de défilement et le haut du décalage de la barre latérale, limitant efficacement la plage de défilement de la carte dans la barre latérale hauteur.

Approche alternative :

Dans certains scénarios, une approche alternative pourrait être préférée. Par exemple, si l'élément de carte a une hauteur fixe et que la barre latérale se développe dynamiquement, nous pouvons simplifier les calculs.

<br>$(window).scroll(function() {<br> var scrollVal = $(this).scrollTop();<br> if (scrollVal > $(".header").height()) {</p>
<pre class="brush:php;toolbar:false">$("#map").css({
  position: "fixed",
  top: "0px"
});

} else {

$("#map").css({
  position: "static"
});

}
});

Dans ce cas, nous utilisons le la hauteur de l'en-tête comme point de référence, en supposant qu'elle reste une hauteur fixe. Lorsque la position de défilement dépasse la hauteur de l'en-tête, nous fixons la position de la carte en haut de la fenêtre. Cette approche garantit que la carte défile au moment approprié, tout en restant dans la hauteur de la fenêtre.

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!