【问题标题】:How can I prevent the page scrolling when I have scrolled to the bottom of a div inside it? [duplicate]当我滚动到其中的 div 底部时,如何防止页面滚动? [复制]
【发布时间】:2013-05-09 13:19:14
【问题描述】:

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

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

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

有没有办法阻止这种情况的发生(如果需要,使用 javascript),这样即使它已经滚动到底部并且页面本身只在用户没有悬停在 div 上时才会滚动,焦点仍然在 div 上?

【问题讨论】:

标签: javascript html scroll


【解决方案1】:

查看此演示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;
});

【讨论】:

  • 这有什么不对?
  • 我在jfiddle中试过了,还是不行。当您滚动到 div 的底部,然后等待一秒钟并再次滚动时,页面会滚动。
  • +1,适用于我使用 Google Chrome 26.0.1410.64 m。
  • 我使用的是 firefox 20.0.1,但它不适合我。
  • @Urbycoz - FF 中的 Din 测试。让我看看..
猜你喜欢
  • 2011-11-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多