Jump to content

Transparent Scrollbar Track

Go to solution Solved by AlexSan,

Recommended Posts

https://perch-sparrow-5acs.squarespace.com/
password: 12345 

 

Hi! Is it possible to turn my scrollbar track transparent? I attempted to do it using the code below, but it just turns the scrollbar track white. I would like to make it truly transparent, because as you can see by viewing the site, it cuts off shapes and images. But I have a suspicion it may be not be possible to override this. 

 

Thank you !!

 

 ::-webkit-scrollbar-track {
 background: transparent;
}

 

Link to comment

It does appear to be transparent but there's no content below it, so it shows as white.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

@kaydotjpg,

The code you're using is working as intended.

However, I get what you're trying to do. The way people use to do it (setting scroll bar to overlay) is deprecated, and no longer works. It's a little more complicated to do now.

I would suggest using simplebar, however, this doesn't work on <body>, only on <div>. Take a look at this example: jsfiddle

Could also take a look at OverlayScrollbars. Not familiar with this one.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.