防止窗口在 div 滚动后继续滚动

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();
}

- Rees

Answer 1

我没有深入研究你的代码和问题，但在继续之前，我想提出一个建议 :P。

window.addEventListener

而

document.onmousewheel = handleWheelEvent;

通常是应用于整个文档的好方法，而如果您想将特定值（在此情况下为scroll = false）应用于特定元素，则需要将引用设置为该特定引用（即getElementById()，然后它仅适用于文档的元素）。

我不知道 - 也许这有帮助，也许没有:P 祝你好运。

-J

- Justin Carroll

Answer 2

你需要修改 handleWheelEvent 函数并检查事件 e 的 srcElement 属性，当它不滚动 DIV 盒子时调用 preventDefault()。这里有一个带有一些代码示例的链接：

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

- leepowers

---

谢谢pygorex1，我看了一下链接，但是我还不太明白如何实现你的解决方案。我有点新手，你能否详细解释一下如何修改handleWheelEvent函数以及如何确定它是否来自div框？ - Rees

Answer 3

我曾经遇到过类似的问题，通过谷歌搜索来到这里。在过去的四年中，这个不完整的答案已经被浏览了超过1700次。我想一旦我编写出解决方案，就会将其放入JSFiddle并分享给大家。迟做总比不做好。

在MacOSX / Chrome上进行了测试。

http://jsfiddle.net/mF8Pr/

我的问题涉及在轻箱内部的文本区域中滚动，并在覆盖层下方禁用页面上的其余滚动。

1. 将鼠标滚轮事件绑定到文档上
2. 当事件触发时（可选：检查是否覆盖层可见）
3. 检查目标对象是否为我们想要启用滚动的对象
4. 确保 0 < obj.scrollTop < (obj.scrollHeight - obj.clientHeight)
5. 检查尝试滚动事件的方向。event.originalEvent.deltaY
   
   • UP == 负数
   • DOWN == 正数

6. 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(); // 已经在顶部
         }
         else if(e.originalEvent.deltaY > 0  && e.target.scrollTop >= 
                (e.target.scrollHeight - e.target.clientHeight))
         {
           // 必须使用大于号，因为有时候计算会多出1像素         
           e.preventDefault(); // 已经在底部
         }
       }
     }
   });
   

-阿曼达

- user3808981