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

내부 요소가 끝에 도달할 때 상위 요소 스크롤 전파 방지

오버플로가 있는 고정 div 내에서 스크롤할 때 스크롤이 요청이 상위 요소에 의해 "인계"되어 외부 문서가 도구 상자 너머로 스크롤됩니다. 스크롤 이벤트 전파를 방지하면 이 동작을 중지할 수 있습니다.

jQuery event.stoppropagation() 메서드가 적절한 솔루션처럼 보일 수 있지만 전파를 완전히 방지하는 데는 실패합니다. 대신, 더 효과적인 접근 방식은 jQuery에서 mousewheel 이벤트를 처리하는 것입니다.

mousewheel 이벤트는 스크롤 방향과 양을 나타내는 WheelDelta 속성을 제공합니다. WheelDelta 값을 확인하면 스크롤이 내부 div의 상단 또는 하단을 초과할지 여부를 결정할 수 있습니다.

Internet Explorer 호환성을 위해서는 에서 반전된 기호가 있는 OriginalEvent.detail 속성을 사용해야 합니다. 다른 브라우저. 세부 사항에 -40을 곱하면 모든 브라우저에서 값이 정규화됩니다.

제공된 jQuery 코드는 이 접근 방식을 보여줍니다.

<code class="javascript">$(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) {
    // Get the div's scroll properties
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.innerHeight(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta);

    // Determine if the scroll would exceed the edge conditions
    if (delta > 0 && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down past the bottom, prevent and scroll to bottom
        $this.scrollTop(scrollHeight);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    } else if (delta < 0 && delta > scrollTop) {
        // Scrolling up past the top, prevent and scroll to top
        $this.scrollTop(0);
        ev.stopPropagation();
        ev.preventDefault();
        return false;
    }
});</code>

마우스 휠 이벤트를 처리하고 가장자리에 도달할 때 스크롤 전파를 방지합니다. 내부 div의 경우 상위 요소 스크롤의 원치 않는 동작을 효과적으로 방지하고 원하는 컨테이너 내에서 스크롤을 유지할 수 있습니다.

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