Custom Scrollbar

by
custom scrollbar
body::-webkit-scrollbar {
width: 12px; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
background: orange; /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
background-color: blue; /* color of the scroll thumb */
border-radius: 20px; /* roundness of the scroll thumb */
border: 3px solid orange; /* creates padding around scroll thumb */
}
custom scrollbar css
/* transparent scrollbar */
div::-webkit-scrollbar {
width: 12px;
}

div::-webkit-scrollbar-thumb {
border: 2px solid #ffffff2f;
border-radius: 20px;
}
css custom scrollbar
::-webkit-scrollbar { } /* Entrie scrollbar*/
::-webkit-scrollbar-track { } /* Scrollbar track */
::-webkit-scrollbar-thumb { } /* Scrollbar thumb */
style scrollbar
/* Chrome, safari */
*::-webkit-scrollbar {
width: 8px;
}

*::-webkit-scrollbar-thumb {
background-color: gray;
}

/* Firefox */
.selector {
scrollbar-width: none;
}
custom scrollbar
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-thumb {
background: #ff9c44;
border-radius: 6px;
}

by moheen
Css Custom Scrollbar
body::-webkit-scrollbar {
@apply w-[10px] bg-[#0b1120];
}
body::-webkit-scrollbar-track {
@apply bg-slate-200 dark:bg-[#0B1120];
}
body::-webkit-scrollbar-thumb {
@apply rounded-xl bg-gray-600 dark:bg-slate-700;
}

 

 

 

Leave a Comment