Javascript 当我已经滚动到其中一个div的底部时，如何防止页面滚动？

我的页面上有几个div如下所示：

<div style="height:200px; overflow:auto;">
    <div style="height:300px;">
        <!--Lots of text here-->
    </div>
</div>

当用户将鼠标悬停在它们上方并使用滚轮滚动时，它们滚动良好。问题是，当用户到达底部时，页面本身开始滚动

有没有办法阻止这种情况发生（必要时使用javascript），这样即使div已滚动到底部，焦点仍会停留在div上，而页面本身仅在用户未悬停在div上时才会滚动？

检查此演示：

代码：

//绑定鼠标滚轮事件
$（'.myDiv'）.bind（'mousewheel'，函数（e）{
//如果滚动方向是向下的，没有更多的滚动
如果（e.原始事件.车轮三角形<0&&
（$（this.scrollTop（）+$（this.height（））>=this.scrollHeight）返回false；
});

这有什么不对吗？我在JFIDLE中试用过，但不起作用。当您滚动到div的底部，然后等待一秒钟并再次滚动时，页面会滚动。+1，使用Google Chrome 26.0.1410.64 m对我有效。我使用的是firefox 20.0.1，它对我无效。@Urbycoz-Din在FF中测试。让我想想……这个问题以前有人问过。下面是一个例子，答案可以在这里找到：基本上，您需要绑定mousewheel事件并使用Javascript控制子元素的滚动。他的插件还有一些有趣的演示：

// bind the mousewheel event
$('.myDiv').bind('mousewheel', function(e) {
    // if scroll direction is down and there is nothing more to scroll
    if(e.originalEvent.wheelDelta < 0 && 
    ($(this).scrollTop() + $(this).height()) >= this.scrollHeight) return false;
});