Jquery | CSS - activating and de-activating scroll of an element on hover_问答_开发者

Jquery | CSS - activating and de-activating scroll of an element on hover

开发者 https://www.devze.com 2023-03-06 05:32 出处：网络

Here is the scenario: I have an HTML that is scrollable. Inside that HTML I have a div that is also scrollable.

相关专题：css jquery

Here is the scenario:

I have an HTML that is scrollable.
Inside that HTML I have a div that is also scrollable.

When the mouse is in that div, I don't want the main HTML scroll to be active. It sh开发者_开发知识库ould only scroll inside the div. When it reaches the end it shouldn't scroll anymore that div and the body scroll should not activate.

Here is a sample:

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

I don't even know where to start. CSS? JQUERY?

Any help appreciated.

Here is the full working code.....

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