JSFiddle - React, Tailwind, and code Playground
by lomatek
HTML
<div style="overflow: auto">
<div style="width: 3000px; height: 4000px"></div>
</div>CSS
scrollbar {
-moz-appearance: none !important;
background: rgba(255, 255, 255, 0.1);
width: 16px !important;
min-width: 15px !important;
}
scrollbar[orient="horizontal"] {
height: 16px;
min-height: 15px !important;
}
/* ::::: borders for thumb and buttons ::::: */
scrollbar thumb {
-moz-appearance: none !important;
background: rgba(255, 255, 255, 0.5);
border-style:none;
border-width:0;
min-height: 24px;
}
scrollbar thumb[orient="horizontal"] {
min-width: 24px;
}
scrollbar thumb:hover {
background: rgba(255, 255, 255, 0.8);
}
scrollbar thumb:active, scrollbar thumb[active="true"] {
background: rgba(255, 255, 255, 0.9);
}
/* ::::: scrollbar button ::::: */
scrollbar scrollbarbutton {
display: none !important;
visibility: collapse !important
}
/* ::::: square at the corner of two scrollbars ::::: */
}
scrollcorner {
display: none !important;
}