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 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>
加载中,请稍侯......
精彩评论