Wie kann der Bildlaufbereich eines Elements innerhalb eines übergeordneten Elements mit dynamischer Größe begrenzt werden?

Implementieren von CSS-Höhenbeschränkungen für vertikale Bildlaufelemente

In einer interaktiven Benutzeroberfläche ist die Steuerung des Bildlaufverhaltens von Elementen für die Sicherstellung der Benutzererfahrung von entscheidender Bedeutung Zugänglichkeit. Ein solches Szenario beinhaltet die Begrenzung des Bildlaufbereichs eines Elements innerhalb eines übergeordneten Elements mit dynamischer Größe.

Problem:
Stellen Sie sich ein Layout vor, in dem wir ein scrollbares Karten-DIV haben, das sich mitbewegt den vertikalen Bildlauf des Benutzers, während die Ausrichtung an einer festen Seitenleiste beibehalten wird. Das Scrollen der Karte erstreckt sich jedoch auf unbestimmte Zeit und überschreitet die Höhe des Ansichtsfensters, sodass Benutzer nicht auf die Seitenfußzeile zugreifen können.

Lösung:
Um dieses Problem zu beheben und das Scrollen der Karte einzuschränken, können wir dies tun Nutzen Sie CSS- und JavaScript-Techniken.

Zuerst definieren wir mithilfe der Eigenschaft „max-height“ eine CSS-Höhenbeschränkung für den Karten-DIV. Dadurch wird eine maximale Höhe festgelegt, die die Karte erreichen kann, um sicherzustellen, dass sie die Höhe des übergeordneten Elements nicht überschreiten kann.

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

Als nächstes verwenden wir JavaScript, um die Scrollposition des Benutzers zu verfolgen und die Position der Karte entsprechend anzupassen. Anstatt die Methode „.animate()“ von jQuery zu verwenden, entscheiden wir uns aus Leistungsgründen für die direkte CSS-Manipulation.

<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"
});

Nach dem Login kopieren

} else {

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

}
});

In diesem Code berechnen wir die Differenz zwischen der Bildlaufposition und dem oberen Versatz der Seitenleiste, wodurch der Bildlaufbereich der Karte effektiv begrenzt wird innerhalb der Höhe der Seitenleiste.

Alternativer Ansatz:

In einigen Szenarien könnte ein alternativer Ansatz bevorzugt werden. Wenn das Kartenelement beispielsweise eine feste Höhe hat und die Seitenleiste dynamisch erweitert wird, können wir die Berechnungen vereinfachen.

<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"
});

Nach dem Login kopieren