How do I leave absolute scroll to the div?

Question

How do I leave absolute scroll to the div?

Navigation

#1 by (1 votes)

0

I wanted to leave the absolute scroll to div , as they do in the post pages of #, in the left bar where it has the indications of other matters.

Fucked in the source code of the guys, but I did not find any Javascript or plugin that was doing this service, or even a CSS .

Can anyone help me with how to do this?

javascript html css

asked by anonymous 30.07.2015 / 17:36

1 answer

Transition effect doubles with CSS How to do insert with values posted in textarea

score 1 · Answer 1

First you have to set a fixed height for the content area.

Use overflow: auto for the area you want the vertical scroll bar to be.

Use overflow: hidden and position: absolute so the left bar does not move.

To make the scrollbar appear in the left pane only when the user places the mouse cursor on it use :hover { overflow-y: scroll } .

I've put down the fiddle code given in an answer to a similar question to that 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>