Streaming live at 10am (PST)

Custom CSS - Horizontal Scrollbar


#1

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 - https://css-tricks.com/custom-scrollbars-in-webkit/ but couldn’t really figure it out…

Thanks!

Uri


Here is my public share link: https://preview.webflow.com/preview/consumerdynamics?preview=07e9a2a418c5644fe597ba611a065fce


#2

@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):

<style>
	/*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; }
 
</style> 

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


#3

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