Q:

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

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

A:

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>

