Jquery | CSS-激活和取消激活悬停元素的滚动_Jquery_Css_Html

Jquery | CSS-激活和取消激活悬停元素的滚动

jquery css html

Jquery | CSS-激活和取消激活悬停元素的滚动,jquery,css,html,Jquery,Css,Html,以下是场景：我有一个可滚动的HTML 在HTML中，我有一个div也是可滚动的当鼠标位于该div中时，我不希望主HTML滚动处于活动状态。它应该只在div内滚动。当它到达末尾时，它不应该再滚动该div，主体滚动也不应该激活以下是一个示例： <html> <body style="overflow:scroll;"> <div id="SOME_ID">SCROLLABLE CONTENT HERE</div>

以下是场景：

我有一个可滚动的HTML
在HTML中，我有一个div也是可滚动的

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

以下是一个示例：

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


这里有可滚动的内容

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

感谢您的帮助。

这是完整的工作代码

    <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>


身体
{
高度：399px；//仅用于演示…您可以指定任何高度。
溢出：滚动；
}
#一些
{
边框：1px纯黑；
溢出：滚动；
}
$（文档）.ready（函数（）
{
$（“#SOME_ID”）.mouseover（函数（）
{
$（“body”）.css（'overflow'，'hidden'）；
});
$（“#SOME_ID”）.mouseout（函数（）
{
$（“body”）.css（'overflow'，'scroll'）；
});
});
这里有可滚动的内容

这应该是常见浏览器的默认行为。