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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$("#map").css({
  marginTop: (scrollVal - $("#sidebar").offset().top) + "px"
});

Copier après la connexion

} 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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$("#map").css({
  position: "fixed",
  top: "0px"
});

Copier après la connexion