Jquery | CSS - 激活和去激活元素的卷轴上悬停

我有一个HTML是滚动的。
在HTML里面我有一个也可以滚动的div。

当鼠标在该div中时，我不希望主HTML滚动处于活动状态。它应该只在div内滚动。当它到达结尾时，它不应该再滚动该div，并且不应该激活身体滚动。

这里有一个例子：

<html> 
    <body style="overflow:scroll;"> 
     <div id="SOME_ID">SCROLLABLE CONTENT HERE</div> 
    </body> 
</html>

我甚至不知道从哪里开始。 CSS？ JQUERY？

任何帮助表示赞赏。

来源

2011-05-15 denislexic

这应该是常见的浏览器的默认行为。 – Alp 2011-05-15 11:55:59

以下是完整的工作代码.....

<html> 
    <head> 
    <style type="text/css"> 
    body 
    { 
     height:399px;//just for demo...you can specify whatever the height may be. 
     overflow:scroll; 
    } 
    #SOME_ID 
    { 
     border:1px solid black; 
     overflow:scroll; 
    } 
    </style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
    $(document).ready(function() 
    { 
    $("#SOME_ID").mouseover(function() 
    { 
    $("body").css('overflow','hidden'); 
    }); 
    $("#SOME_ID").mouseout(function() 
    { 
    $("body").css('overflow','scroll'); 
    }); 
    }); 
    </script> 
    </head> 
    <body> 
    <div id="SOME_ID">SCROLLABLE CONTENT HERE</div> 
    </body> 
    </html>

来源

2011-05-15 11:57:02 Anish

Jquery | CSS - 激活和去激活元素的卷轴上悬停

回答

相关问题