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.

closed #3

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