Streaming live at 10am (PST)

Custom CSS - Horizontal Scrollbar

Hi everyone,

I want to implement a custom horizontal scrollbar (like in the attached image).

Does anyone know of an easy way to do that?
I looked into this - but couldn’t really figure it out…



Here is my public share link:

@Uri great question!

I’ve user something like this before on my site (Read-Only link) for custom CSS scrollbars (there are directions in the CSS as well, keep in mind this will only render on the published site, not in the Designer):

	/*change the thinkness of the scrollbar here*/
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
 /*add a shadow to the scrollbar here*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
/*this is the little scrolly dealio in the bar*/ 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #4353ff;
    height: 3px;
/*nobody needs this little scrollbar corner, I mean really, get rid of it haha*/  
  ::-webkit-scrollbar-corner       { display: none; height: 0px; width: 0px; }

Not sure if you’ll be able to get everything exactly designed as you have it but can at least get close.


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