Home/ Questions/Q 5842753
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T12:03:34+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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