CSS Custom scroll bar

The scene I met:

For an iframe window, the own scroll bar is the size of the entire window. Sometimes the top or bottom is required, the scroll bar should not touch the top or bottom.

The first time you open the IFRAME, you should remove the scrollbar scrolling= "No" and then customize the scroll bar in the area where you want to scroll.

<frameborder= "0"   scrolling= "No"  src= " Index.html ">

The custom scroll bar code is as follows:

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Rolling</title>    <style>. Scroll_contain{overflow-y:Scroll;Border:None;}. Scroll_config::-webkit-scrollbar{/*scroll bar Overall style*/width:5px;Height:5px}. Scroll_config::-webkit-scrollbar-thumb{/*little squares inside the scroll bar*/Background-color:#ccc;Border:Solid 1px #ccc;Border-radius:10px;    }. Scroll_config::-webkit-scrollbar-track{/*scroll bar Inside track*/-webkit-box-shadow:inset 0 0 5px rgba (0,0,0,0.2);Border-radius:10px;background:#EDEDED;    }. Scroll_config::-webkit-scrollbar-arrow{Color:#F00;background:#0F0;}        </style></Head><Body>       <Divclass= "Scroll_contain scroll_config"style= "height:200px;width:200px">               <Div>Oriental Invincible East Invincible Oriental Invincible East Invincible Oriental Invincible Oriental Invincible East Invincible Oriental Invincible East Invincible East Invincible Oriental Invincible Oriental Invincible East undefeated invincible the Oriental unbeaten win in the Orient Invincible the Oriental undefeated East unbeaten  Oriental Invincible East Invincible Oriental Invincible Oriental Invincible Oriental Invincible Oriental Invincible Oriental Invincible East Invincible Oriental Invincible East Invincible Oriental Invincible Oriental Invincible East Invincible Oriental Invincible Invincible East undefeated in the Orient unbeaten in the east of the East invincible the eastern Invincible East undefeated            Oriental Invincible East Invincible Oriental Invincible Oriental Invincible Oriental Invincible Oriental Invincible Oriental Invincible East Invincible Oriental Invincible East Invincible Oriental Invincible Oriental Invincible East Invincible Oriental Invincible Invincible East undefeated in the Orient unbeaten in the east of the East invincible the eastern Invincible East undefeated Oriental Invincible East Invincible East Invincible Oriental Invincible Oriental Invincible East Invincible Oriental Invincible Oriental Invincible East Invincible. Undefeated Oriental unbeaten win.</Div>       </Div></Body></HTML>

The effect is as follows:

Oriental Invincible East Invincible East Invincible Oriental Invincible Oriental Invincible Oriental Invincible East Invincible Oriental Invincible East Invincible Oriental Invincible East Invincible East Invincible Oriental Invincible Oriental Invincible East Invincible East undefeated Invincible Oriental undefeated Invincible eastern unbeaten win the East invincible the Oriental undefeated in the east undefeated in the Orient undefeated the eastern undefeated Oriental Invincible East Invincible East Invincible Oriental Invincible Oriental Invincible Oriental Invincible East Invincible Oriental Invincible East Invincible Oriental Invincible East Invincible East Invincible Oriental Invincible Oriental Invincible East Invincible East undefeated Invincible Oriental undefeated Invincible eastern unbeaten win the East invincible the Oriental undefeated in the east undefeated in the Orient undefeated the eastern undefeated Oriental Invincible East Invincible East Invincible Oriental Invincible Oriental Invincible Oriental Invincible East Invincible Oriental Invincible East Invincible Oriental Invincible East Invincible East Invincible Oriental Invincible Oriental Invincible East Invincible East undefeated Invincible Oriental undefeated Invincible eastern unbeaten win the East invincible the Oriental undefeated in the east undefeated in the Orient undefeated the eastern undefeated

The above appears the horizontal scroll bar is because the blog Park edit the source code when does not support Overflow-y:scroll, I changed to Overflow:scroll's sake.

Note that scroll bars appear only when the height of the child container is greater than the height of the parent container

CSS Custom scroll bar