Question

我有一个小的div框，它有一个垂直滚动条，位于一个html页面中，该页面也有一个垂直滚动条。

我的问题是当用户到达小DIV框滚动的末尾时，包含div框的整个html页面开始滚动（假设用户通过鼠标滚动滚动而不是实际点击DIV框滚动按钮本身）

有没有办法阻止整个html页面滚动一旦用户到达我的小DIV框滚动结束？任何帮助将非常感激！谢谢！

我试过这个（但是即使是div框也取消了滚动）：

if (window.addEventListener)
    /** DOMMouseScroll is for mozilla. */
    window.addEventListener('DOMMouseScroll', handleWheelEvent, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = handleWheelEvent;

function handleWheelEvent(e){
    e.preventDefault();
}

Answer 1

我对你的代码和问题看起来并不多，但我想在继续之前抛弃一个建议：P。

window.addEventListener

和

document.onmousewheel = handleWheelEvent;

通常是应用您想要执行ENTIRE文档的好方法，而如果要将特定值（在本例中为scroll = false）应用于特定元素，则需要设置对该特定元素的引用引用（即getElementById（）然后它只适用于文档的元素。）

Idk - 也许这会有所帮助，也许不会：P祝你好运。

-J

Answer 2

您需要修改handleWheelEvent函数并检查srcElement事件的e属性，并在不滚动DIV框时调用preventDefault()。这是一些代码示例的链接：

http://www.webdeveloper.com/forum/archive/index.php/t-158824.html

Answer 3

我有类似的问题。谷歌带领我来到这里。在4年内，超过1700次观点的答案不完整。我想，一旦我编写了一个解决方案，我就会在JSFiddle中弹出它并分享它。迟到总比不到好。

在MacOSX / Chrome上测试。

http://jsfiddle.net/mF8Pr/

我的问题涉及能够在灯箱内的文本区域内滚动，以及禁用在叠加层下面的其余页面滚动。

将鼠标滚轮事件绑定到文档
当事件触发时（可选：测试以确保叠加层可见）
检查目标是obj我们想要启用滚动
确保0＆lt; obj.scrollTop＆lt; （obj.scrollHeight - obj.clientHeight）
检查尝试滚动事件的方向.originalEvent.deltaY
- UP ==否定
- DOWN == positive

event.preventDefault（）

$(document).bind('mousewheel', function(e){
  //if($overlay.is(':visible'))
  {
    if(e.target != null && e.target.type != 'textarea')
    {
      e.preventDefault();
    }
    else
    {
      if(e.originalEvent.deltaY < 0 && e.target.scrollTop == 0)
      {
        e.preventDefault(); // already at top
      }
      else if(e.originalEvent.deltaY > 0  && e.target.scrollTop >= 
             (e.target.scrollHeight - e.target.clientHeight))
      {
        // must use greater than because sometimes 
        // the math is wrong by 1px         
        e.preventDefault(); // already at bottom
      }
    }
  }
});

-Amanda

在div框滚动后阻止滚动窗口

3 个答案: