YumYumYum YumYumYum - 3 months ago 13
CSS Question

How to make scroll down and scroll up button outside the scroll box?

Game designer gave me to make the scrollbar with custom up and down button and custom looking scrollbar (not then one natively available from the browser on Windows via Google Chrome)

enter image description here

I tried as following but how can i remove that native scroller inside the div? and use my own look and feel vertical scrollbar outside the div, which can interact with my existing div?



.FixedHeightContainer {
height: 250px;
width:250px;
padding:3px;
background:#f00;
}
.Content {
height:224px;
overflow:auto;
background:#fff;
}

<span>UP</span>
<br/>
<div class="FixedHeightContainer">
<h2>Title</h2>
<div class="Content">
Game UI sucks<Br/>
Game UI i hate it, nightmare for programmers<Br/>
Game UI is hard<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
Game UI<Br/>
</div>
</div>

<Br/>
<span>DOWN</span>




Answer

Refer the below link. It is a one stop answer for all your queries related to custom scroll bars.

css-tricks scrollbar

EDIT: View Demo

/* For the "inset" look only */
html {
    overflow: auto;
}

body {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    padding: 30px; 

    overflow-y: scroll;
    overflow-x: hidden;
}

/* FAT or SLIM? */
::-webkit-scrollbar {
    width: 12px;
}

/* Slider bar */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Button inside the slider  */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}