A game designer challenged me to create a custom scrollbar with unique up and down button styles, as well as a custom-looking scrollbar. I wanted to achieve this without using the native browser scrollbar on Windows in Google Chrome.
https://i.sstatic.net/uguOH.png
I attempted the following approach, but I'm unsure how to remove the default browser scrollbar inside the div. How can I create my own customized vertical scrollbar outside the div that interacts seamlessly with the existing content?
.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>