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

내부 요소가 가장자리 경계에 도달할 때 상위 요소 스크롤 방지

특정 시나리오에서는 내부 요소 내에서 스크롤하면 상위 요소의 원치 않는 스크롤이 발생할 수 있습니다. 내부 요소의 가장자리 경계에 도달하면 요소가 나타납니다. 이는 부동 도구 상자나 위치가 고정된 창과 상호 작용할 때 특히 실망스러울 수 있습니다.

이러한 원치 않는 전파를 방지하려면 내부 요소에서 스크롤 이벤트를 처리하고 상위 요소까지 버블링되는 것을 방지해야 합니다. 그러나 단순히 event.stopPropagation()을 사용하는 것만으로는 모든 경우에 충분하지 않을 수 있습니다.

가장 신뢰할 수 있는 솔루션은 다양한 브라우저에서 스크롤 동작을 표준화하는 방법을 제공하는 mousewheel 이벤트를 사용하는 것입니다. 마우스휠 델타를 내부 요소의 스크롤 위치와 비교하여 스크롤이 상단 경계에 도달했는지 하단 경계에 도달했는지 확인할 수 있습니다.

스크롤이 경계에 도달하면 이벤트를 취소하고 jQuery의 scrollTop( ) 메서드를 사용하여 스크롤 위치를 적절한 최소값 또는 최대값으로 설정합니다. 이 접근 방식은 이벤트가 상위 항목으로 전파되는 것을 효과적으로 방지하고 내부 요소 내에서 원활한 스크롤을 보장합니다.

다음은 이 솔루션을 구현하는 코드 조각입니다.

<code class="javascript">$(".ToolPage").bind('mousewheel', function(e, d)  {
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
        e.preventDefault();
    } else {
        if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
            e.preventDefault();
        }
    }
});</code>

이 솔루션은 마우스를 고려합니다. 위아래로 스크롤하여 Internet Explorer 및 기타 브라우저에서 상위 요소의 원치 않는 스크롤을 방지합니다.

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