如何禁用外部元素的滚动？ [英] How to disable scrolling in outer elements?

问题描述

当使用鼠标滚轮滚动子div并到达顶部或底部时，在页面中垂直滚动div滚动条，页面（主体）开始滚动。当鼠标移到子div上时，我希望页面（主体）滚动被锁定。

这个帖子（向下滚动到所选答案）很好地表明了这个问题。

这个SO问题与我的基本相同，但当滚动条消失并重新出现时，所选答案会导致我的页面内容显着水平移动。

我认为可能有一个解决方案利用event.stopPropagation（），但couldn没有什么可以工作的。在ActionScript中，这种事情可以通过在子事件上放置一个mousewheel处理程序来解决，该子事件在事件到达body元素之前调用stopPropagation（）。由于JS和AS都是ECMAScript语言，我认为这个概念可能会翻译，但它似乎没有用。

有没有一种解决方案可以保留我的页面内容转移？最有可能使用stopPropagation而不是CSS修复？ JQuery的答案和纯JS一样受欢迎。

解决方案

这就是我最终的结果。非常类似于@ mrtsherman的答案这里 a>，只有纯JS事件而不是jQuery。不过，我仍然使用jQuery来选择和移动子div。

  //早些时候，我有代码引用我的孩子div，as childDiv 
 
 function disableWindowScroll（）{
 if（window.addEventListener）{
 window.addEventListener（DOMMouseScroll，onChildMouseWheel，false）; 
} 
 window.onmousewheel = document.onmousewheel = onChildMouseWheel; 
 
 
函数enableWindowScroll（）{
 if（window.removeEventListener）{
 window.removeEventListener（DOMMouseScroll，onArticleMouseWheel，false）; 
} 
 window.onmousewheel = document.onmousewheel = null; 
} 
 
函数onChildMouseWheel（event）{
 var scrollTgt = 0; 
 event = window.event ||事件; 
 if（event.detail）{
 scrollTgt = -40 * event.detail; 
} else {
 scrollTgt = event.wheelDeltaY; 
} 
 
 if（scrollTgt）{
 preventDefault（event）; 
 $（childDiv）.scrollTop（$（childDiv）.scrollTop（） -  scrollTgt）; 
} 
} 
 
 function preventDefault（event）{
 event = event || window.event; 
 if（event.preventDefault）{
 event.preventDefault（）; 
} 
 event.returnValue = false; 
} 
  

我注意到滚动与正常滚动不匹配;它似乎滚动比没有这个代码快一点。我认为我可以通过敲下WheelDeltaY来解决问题，但奇怪的是，它会以不同的方式通过JavaScript进行报告，而不是由浏览器实际执行。

I have a vertically-scrolling div within a page that also scrolls vertically.

When the child div is scrolled with the mouse wheel and reaches the top or bottom of the scroll bar, the page (body) begins to scroll. While the mouse is over the child div, I'd like the page (body) scroll to be locked.

This SO post (scroll down to the selected answer) demonstrates the problem well.

This SO question is essentially the same as mine, but the selected answer causes my page contents to noticeably shift horizontally as the scrollbar disappears and reappears.

I thought there might be a solution that leverages event.stopPropagation(), but couldn't get anything to work. In ActionScript, this kind of thing would be solved by placing a mousewheel handler on the child div that calls stopPropagation() on the event before it reaches the body element. Since JS and AS are both ECMAScript languages, I thought the concept might translate, but it didn't seem to work.

Is there a solution that keeps my page contents from shifting around? Most likely using stopPropagation rather than a CSS fix? JQuery answers are welcome as is pure JS.

解决方案

here's what i ended up with. very similar to @mrtsherman's answer here, only pure JS events instead of jQuery. i still used jQuery for selecting and moving the child div around, though.

// earlier, i have code that references my child div, as childDiv

function disableWindowScroll () {
    if (window.addEventListener) {
        window.addEventListener("DOMMouseScroll", onChildMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = onChildMouseWheel;
}

function enableWindowScroll () {
    if (window.removeEventListener) {
        window.removeEventListener("DOMMouseScroll", onArticleMouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = null;
}

function onChildMouseWheel (event) {
    var scrollTgt = 0;
    event = window.event || event;
    if (event.detail) {
        scrollTgt = -40 * event.detail;
    } else {
        scrollTgt = event.wheelDeltaY;
    }

    if (scrollTgt) {
        preventDefault(event);
        $(childDiv).scrollTop($(childDiv).scrollTop() - scrollTgt);
    }
}

function preventDefault (event) {
    event = event || window.event;
    if (event.preventDefault) {
        event.preventDefault();
    }
    event.returnValue = false;
}

i've noticed the scrolling doesn't match normal scrolling exactly; it seems to scroll a bit faster than without this code. i assume i can fix by knocking down wheelDeltaY a bit, but it's odd that it would be reported differently by javascript than it's actually implemented by the browser...

这篇关于如何禁用外部元素的滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！