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

Question

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)

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>

and if you want to hide it with overflow:hidden; as @JaromandaX said and still be able to scroll, this post can help you http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — Enmanuel Duran, Sep 03 '16 at 08:13
I've added javascript to UP/DOWN in this http://jsfiddle.net/ftkbL/4903/ — Jaromanda X, Sep 03 '16 at 08:15
overflow:hidden worked. But how do i have up, down and scrollbar which looks different but still able to scroll that div? — , Sep 03 '16 at 08:17
make your own scroll bar - you can see how the up/down would work in the fiddle I updated in the previous comment - if you want someone to write the whole scrollbar code for you, it wont be me :) — Jaromanda X, Sep 03 '16 at 08:18
Sir, when i tried http://jsfiddle.net/ftkbL/4903/, its not working to slide up or down. — , Sep 03 '16 at 08:18
It wont work because @JaromandaX is just giving you a hint of how to hide the scroll, if you actually want the scroll to work you have to add another div inside the content and push the scroll bar out of the parent with the overflow:hidden; so it can be hidden, I recommend you to read about custom scrolls and scroll events to solve this question. — Enmanuel Duran, Sep 03 '16 at 08:28
@YumYumYum - click on UP and DOWN (the text) - the code there is just a proof of concept ... you'll also want a "draggable" item - again, I'm not icanhazcode.com so I'm not writing it for you — Jaromanda X, Sep 03 '16 at 08:32
Sir, i haz http://jsfiddle.net/ftkbL/4904/ where up/down haz working. how can i haz scrollbar which can track the status of where i am ( 0% to 100% vertical range). Can i haz that please :) — , Sep 03 '16 at 08:52

score 1 · Accepted Answer · edited Sep 04 '16 at 10:08

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); 
}

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

1 Answers1