내부 요소가 스크롤 범위에 도달할 때 상위 요소 스크롤을 방지하는 방법은 무엇입니까?

내부 요소 스크롤 경계에서 상위 요소 스크롤 방지

스크롤 가능한 콘텐츠가 있는 고정 위치 부동 요소로 작업할 때 다음을 수행하는 것이 바람직할 경우가 많습니다. 내부 요소가 상단 또는 하단에 도달할 때 상위 요소가 스크롤 이벤트를 대신하는 것을 방지합니다. 이는 내부 요소의 스크롤 범위가 제한된 경우 특히 실망스러울 수 있습니다.

이벤트 버블링으로 인한 시도 실패

처음에는 stoppropagation()이 이벤트를 효과적으로 차단할 수 있다고 가정했습니다. 상위 요소에 대한 이벤트 버블링. 그러나 지정된 함수를 입력했음에도 불구하고 이벤트가 계속 전파되는 것으로 확인되었습니다.

마우스휠 이벤트 처리 솔루션

올바른 접근 방식은 마우스휠 이벤트를 직접 처리하는 것이었습니다. 이벤트의 휠델타를 감지하고 브라우저별 정규화 인자를 활용함으로써 스크롤 방향(위/아래)과 요소가 스크롤되는 양을 결정할 수 있습니다.

Edge Case Handling

關鍵factor는 마우스 휠 이벤트가 스크롤 위치를 내부 요소의 한계를 넘어서는 극단적인 경우를 처리하고 있었습니다. 스크롤 위치가 상단인지 하단인지 확인하고 적절하게 조정하면 이러한 경우 상위 요소가 스크롤되는 것을 방지할 수 있습니다.

작업 솔루션

다음 jQuery 코드는 이 접근 방식을 사용합니다.

<code class="javascript">$(".Scrollable").bind('mousewheel DOMMouseScroll', function(ev) {
    var $this = $(this),
    scrollTop = this.scrollTop,
    scrollHeight = this.scrollHeight,
    height = $this.innerHeight(),
    delta = (ev.type == 'DOMMouseScroll' ? ev.originalEvent.detail * -40 : ev.originalEvent.wheelDelta),
    up = delta > 0;

    if (!up && -delta > scrollHeight - height - scrollTop) {
        $this.scrollTop(scrollHeight);
        ev.preventDefault();
    } else if (up && delta > scrollTop) {
        $this.scrollTop(0);
        ev.preventDefault();
    }
});</code>

이 코드는 마우스 휠 이벤트를 가로채서 정규화함으로써 내부 요소의 스크롤 위치가 제한 내에 유지되도록 보장하여 적절한 경우 상위 요소가 스크롤되는 것을 효과적으로 방지합니다.

위 내용은 내부 요소가 스크롤 범위에 도달할 때 상위 요소 스크롤을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!