JSFiddle - React, Tailwind, and code Playground

by _hags

HTML

<div class=scroll>
    ks fjsh ksjh jkwhe rkwjhe rkwjehr kwjeh rkwjh skjhdfs kjdfhs kdjfh kwjeh rwkjhe rwkjehr skjdfh sdkfjds kfjds kjh wkejrh wkjerwh kjsh kjxhcv kxjchv kjsd skjdh wkjerh wkejrh wkjerh kjsd fskjdf kwje rwkjerh wkejrh skdjfh skdjfs dkfj hwe kjwhe rkjwehr kjsdhf ksjdh skjdfh skjfhs dkjfhsk hskjdfh kjh kwehr wjkerh kwejhr wkjeh skdjfhs dkfjhsd kfjhsdf ksjdhfs kfjh cvkjxh cvkjxchv xkjcvh xkjhv kjsdfhs kdjfsh kjdhfs dkjfhsd kfjhwek rwhekrj whekjr hwekjfshdf kjshdf ksjdh xkjcvh xkcvjhxvkjxh vkjshdf ksjhdf skdjfh kjsdhf skjfh skjdf hskdjfhw erkj wher wkrw krwjh erkwjehr wkejrh skjdfhs kdjf 
    
</div>

CSS

div { width: 200px; height: 200px; overflow: auto; margin: 30px; border: 1px dashed #ddd; padding: 10px; text-transform: uppercase; font-size: 13px; white-space: 1px; color: #666; background: #eee }

/* brown: #302A23 */

.scroll {

}
.scroll::-webkit-scrollbar {
    width: 13px;
    background: #fff
}

.scroll::-webkit-scrollbar-track {
    border: 1px solid #cbcbcb; width: 13px;
}

.scroll::-webkit-scrollbar-thumb {
    background: #cbcbcb; 
}

::-webkit-scrollbar-button:vertical {
    background-color: #302A23;
    border-radius: 2px;
    color: #ffffff;
    text-align: center;
    line-height: 13px;
    height: 13px;
    padding: 0;
    background: url(http://localhost:3000/images/icon/scroll-up.png) no-repeat;
}
/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block; 
}


::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

.scroll::-webkit-scrollbar-button:vertical:decrement {
}