如何限制動態大小的父元素內元素的滾動範圍？

實現垂直滾動元素的CSS高度限制

在互動介面中，控制元素的滾動行為對於確保使用者體驗和可及性。其中一個這樣的場景涉及限制動態大小的父元素內元素的滾動範圍。

問題：
考慮一種佈局，其中我們有一個可滾動的地圖DIV，它隨著用戶的垂直滾動，同時保持其與固定側邊欄的對齊。然而，地圖的滾動無限延伸，超出了視口的高度，導致使用者無法存取頁腳。

解決方案：
要解決此問題並限制地圖的滾動，我們可以利用 CSS 和 JavaScript 技術。

首先，我們使用「max-height」屬性為地圖 DIV 定義 CSS 高度限制。這設定了地圖可以達到的最大高度，確保它不能超過父元素的高度。

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

接下來，我們使用JavaScript 來追蹤使用者的滾動位置並相應地調整地圖的位置。出於效能原因，我們沒有使用 jQuery 的「.animate()」方法，而是選擇直接 CSS 運算。

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

} else {

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

}
});

在這段程式碼中，我們計算了滾動位置與側邊欄偏移頂部的差值，有效限制了地圖的滾動範圍

替代方法：

在某些情況下，可能會首選替代方法。例如，如果地圖元素的高度固定，側邊欄動態擴展，我們可以簡化計算。

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

} else {

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

}
});

在這種情況下，我們使用標題的高度作為參考點，假設它保持固定高度。當滾動位置超過標題的高度時，我們將地圖的位置固定在視窗的頂部。這種方法可確保地圖在適當的時間捲動到視圖中，同時保持在視窗的高度內。

以上是如何限制動態大小的父元素內元素的滾動範圍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！