동적 크기의 상위 요소 내에서 요소의 스크롤 범위를 제한하는 방법은 무엇입니까?

세로 스크롤 요소에 대한 CSS 높이 제한 구현

대화형 인터페이스에서 요소의 스크롤 동작을 제어하는 ​​것은 사용자 경험과 접근성. 그러한 시나리오 중 하나는 동적으로 크기가 조정된 상위 요소 내에서 요소의 스크롤 범위를 제한하는 것입니다.

문제:
함께 이동하는 스크롤 가능한 지도 DIV가 있는 레이아웃을 고려해보세요. 고정된 사이드바와의 정렬을 유지하면서 사용자의 수직 스크롤. 그러나 지도의 스크롤이 뷰포트 높이를 초과하여 무한정 확장되어 사용자가 페이지 바닥글에 액세스할 수 없게 됩니다.

해결책:
이 문제를 해결하고 지도의 스크롤을 제한하려면 다음을 수행할 수 있습니다. CSS 및 JavaScript 기술을 활용합니다.

먼저 다음을 사용하여 지도 DIV에 대한 CSS 높이 제한을 정의합니다. "최대 높이" 속성. 이는 지도가 도달할 수 있는 최대 높이를 설정하여 상위 요소의 높이를 초과할 수 없도록 합니다.

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

다음으로 JavaScript를 사용하여 사용자의 스크롤 위치를 추적하고 이에 따라 지도의 위치를 ​​조정합니다. jQuery의 ".animate()" 메소드를 사용하는 대신 성능상의 이유로 직접적인 CSS 조작을 선택합니다.

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

로그인 후 복사

} else {

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

}
});

이 코드에서는 다음을 계산합니다. 스크롤 위치와 사이드바 오프셋 상단 사이의 차이로 인해 사이드바 내에서 지도의 스크롤 범위가 효과적으로 제한됩니다. 높이.

대체 접근 방식:

일부 시나리오에서는 대체 접근 방식이 선호될 수 있습니다. 예를 들어 지도 요소의 높이가 고정되어 있고 사이드바가 동적으로 확장되는 경우 계산을 단순화할 수 있습니다.

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

로그인 후 복사