0
I wanted to leave the absolute scroll to the div, as they do on the post pages of Mega Curious site, on the left bar where there are indications of other materials.
I tapped into the guys' source code, but I couldn’t find any Javascript or plugin that was doing this service, or even a CSS.
Can someone help me how to do this?
1
overflow: auto for the area you want to have the vertical scroll bar.overflow: hidden and position: absolute for the left bar not to move.:hover { overflow-y: scroll }.I broke the code of fiddle given in an answer to a similar question to this one in English.
body {
width: 100%;
height: auto;
padding: 0;
margin: 0px auto;
font-family: Calibri, Georgia, Ubuntu-C;
font-size: 16px;
margin-bottom: 20PX
}
#header{
width: 100%;
height: 139px;
background: RED;
}
#left_side{
width: 210px;
height: 300px;
background:#119900;
background-repeat:repeat-y;
overflow:hidden;
position:absolute;
font-size: 16px;
overflow: hidden;
}
#left_side:hover {
overflow-y: scroll;
}
#content{
height: 250px;
overflow:auto;
padding: 20px;
margin-left: 230px;
margin-right: 20px;
padding-bottom: 30px;
background:ORANGE;
}<div id="header">
</div>
<div id="left_side">
a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />a<br />b<br />c<br />d<br />e<br />f<br />g<br />h<br />i<br />j<br />k<br />
</div>
<div id="content">
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
</div>Ah, cool! That’s helped enough! But it would have some way to disable the body scroll, like they do in the curious mega, when the mouse is on the left div?
From what I noticed they don’t use css in this process, like an overflow:Hidden.
I am using a Jquery: 
 function; $('#left_side').mouseenter(function() {
 $('body').on('mousewheel', function(event, delta){
 console.log("false");
 return false;
 });
 $(this).css('overflow','auto');
 }).mouseleave(function() {
 $(this).css('overflow','hidden');
 $('.body').on('mousewheel', function(event, delta){
 console.log("true");
 return true;
 });
 });
But it takes the scroll of all page elements
I think now I’ve got the effect you wanted, @Pedllr. Run my code again and you will see that the left pane presents the scroll bar only when the user puts the mouse over it.
Very good hiccup
Browser other questions tagged javascript html css
You are not signed in. Login or sign up in order to post.
That just seems like a
divwith closed height, content greater than height andoverflow-y: scroll;. No Javascript. Take a look here: http://jsfiddle.net/yrLea844/ <-- this is what you were looking for?– Sergio