仅滚动页内元素，而不是整个页面

问题描述：

有没有注意到，当您用滚轮滚动溢出的div或textarea，并将其滚动到底部时，整个页面开始滚动？仅滚动页内元素，而不是整个页面

可以预防吗？

我做了一个jQuery的scroll（）事件处理程序的快速测试，但似乎太晚了。

这里是测试代码，如果你想玩。

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8"> 
    $(function() { 
    $('#scroller').scroll(function() { 
     $('#notification').css('display','block').fadeOut(); 
     return false; 
    }) 
    }) 
    </script> 
</head> 
<body style="height: 2000px"> 
    <div id="scroller" style="width: 500px; height: 500px; overflow: scroll; margin: 50px"> 
    <div style="width: 1000px; height: 1000px; background: #ddd"></div> 
    </div> 
    <div id="notification" style="display:none">Bang</div> 
</body> 
</html>

火狐4个实现了该行为，在默认情况下！欢呼！ – lawrence 2011-06-15 23:53:49

答

这个js会做，基本上只是把尸体溢出隐藏当鼠标悬停在div＃滚动然后将其设置回正常，当你的鼠标了。

$("#scroller").hover(
    function() { 
     $('body').css('overflow','hidden'); 
    }, 
    function() { 
     $('body').css('overflow','auto'); 
    } 
);

测试在Safari，Firefox和IE8

太棒了！谢谢。 – lawrence 2010-07-29 15:36:58

我希望我们可以让互联网上的每个人都实现这一点。 – lawrence 2011-03-25 21:03:34

仅滚动页内元素，而不是整个页面

相关推荐