How to give scrollbars a custom style?

Design help General
1

I’m looking for something similar to Android scrollbars. Is it possible? How do I implement it?

1 Like
2

actually managed to do it with webkit. It works in Chrome.

3

Great, I’ll put some code here for the new users to find answers :slight_smile:

<style type="text/css">
<!--    
body{scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
 -->
</style>
3 Likes
4

I pasted this in the head code, and oddly it doesn’t do anything. Is there something more one would need to know to use this?

I usesd following code, just pasted it into the head code and it works fine.

<style>
::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}
</style>
5

Hey @bennyhagen try this out:

<style>
  ::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
  
  ::-webkit-scrollbar-corner       { display: none; height: 0px; width: 0px; }
  .SCROLLABLE-Div-Class-Name {
    overflow-x: hidden;}
</style>

EDIT: Make sure to give your scrollable div the “overflow-x: hidden;” piece or else you’ll get a bar at the bottom (unless of course you want one). I typically don’t have a horizontal scroll bar. And I got rid of the scrollbar corner :slight_smile: you could style it if you wanted to. Let me know if you have any questions. :smiley:

Just got it to work on a piece I’d been working on. Good find!

Thank you,

Waldo

5 Likes
6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.