2013-05-09 96 views
5

我有我的网页上几个div的看起来像这样:当我滚动到div内部的div底部时,如何防止页面滚动?

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

当用户将鼠标悬停在他们和滚轮滚动滚动鼠标罚款。麻烦的是,当用户到达底部时,页面本身开始滚动。

有没有办法阻止这种情况发生(如果有必要使用javascript),以便焦点停留在div上,即使它已经滚动到底部并且页面本身只在用户没有在某个div上进行滚动时才滚动?

+0

这个问题已经被问过。这里有一个[demo](http://jsbin.com/ixura3/3),答案可以在这里找到:http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element基本上,你需要绑定mousewheel事件并使用Javascript来控制子元素的滚动。他的插件也有一些有趣的演示: http://brandonaaron.net/code/mousewheel/demos – 2013-05-09 13:27:28

回答

2

入住这演示http://jsfiddle.net/zUGKW/1/

代码:

// 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; 
}); 
+0

这有什么不对的? – techfoobar 2013-05-09 13:32:39

+0

我试过它在jfiddle中,它不起作用。当您滚动到div的底部时,稍等一会再滚动,页面会滚动。 – Urbycoz 2013-05-09 13:34:41

+0

+1,适用于我使用Google Chrome 26.0.1410.64米。 – ComFreek 2013-05-09 13:35:41