Jump to content

scroll bar color change

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

On 1/26/2022 at 2:08 AM, websitehelp said:

website inquiryintotimeandperception.com

pw: inquiry123

 

i'd like to change the scrollbar color to white instead of black because it's not visible. anyone have a code for this?

Do you mean this scrollbar?

image.thumb.png.d8a61d6c689a6226f19d4fcce7c2a3f9.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 hour ago, websitehelp said:

yes

Try

body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background: #ccc; /*color of track*/
  border-radius: 100rem;

}

body::-webkit-scrollbar-thumb {
  background: red;/*color of scrollbar*/
  border-radius: 100rem;
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.facb3d4b7b8e41319f23616bc3fa2ef4.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
4 hours ago, bangank36 said:

Try

body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background: #ccc; /*color of track*/
  border-radius: 100rem;

}

body::-webkit-scrollbar-thumb {
  background: red;/*color of scrollbar*/
  border-radius: 100rem;
}

Let me know how it works on your site

thanks, this worked but it took up space from the margins rather than being a part of the site. is there a way to make it more seamless and just change the color of the scrollbar? without changing the color of the background of the scrollbar too and taking up that extra space?133522478_ScreenShot2022-01-28at10_49_25PM.thumb.png.c171a1cccafe6bc418df761bbd5e74d3.png

Edited by websitehelp
Link to comment

You can try removing the following style for track 

body::-webkit-scrollbar-track {
  background: #ccc; /*color of track*/
  border-radius: 100rem;
}

For the width of scrollbar, kindly try changing the width value in 

body::-webkit-scrollbar {
  width: 10px; /*width of scrollbar*/
}

Until it meets your desire

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 1/28/2022 at 6:34 PM, bangank36 said:

Try

body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background: #ccc; /*color of track*/
  border-radius: 100rem;

}

body::-webkit-scrollbar-thumb {
  background: red;/*color of scrollbar*/
  border-radius: 100rem;
}

Let me know how it works on your site

It unfortunately still takes up space rather than fully integrates itself.

My header image is full bleed and this scroll bar removes that full bleed.

432242476_ScreenShot2022-01-31at12_15_09PM.thumb.png.f1a3b8d863ba82eef8438a6dd8cca2a1.png

 

Link to comment
11 hours ago, websitehelp said:

It unfortunately still takes up space rather than fully integrates itself.

My header image is full bleed and this scroll bar removes that full bleed.

432242476_ScreenShot2022-01-31at12_15_09PM.thumb.png.f1a3b8d863ba82eef8438a6dd8cca2a1.png

 

Kindly try adding the background of  track with transparent so it won't over-hide your images

body::-webkit-scrollbar-track {
  background: transparent; /*color of track*/
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...
On 2/1/2022 at 5:33 AM, bangank36 said:

Kindly try adding the background of  track with transparent so it won't over-hide your images

body::-webkit-scrollbar-track {
  background: transparent; /*color of track*/
}

 

Hi bangank36,
Your code here is really helpful and I really like how it looks. The problem I have is that some of my pages are short and no scroll bar is needed, so it doesn't show up, but this means that when I flip between long pages with scroll bars and short pages with no scroll bar, the navigation at the top adjusts and moves slightly, which I appears really bad to me. 

Any ideas to fix this? Like a code to make the scroll bar track appear even on short pages where there is no scroll? Any help is appreciated. Thank you!

August

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.