scroll bar color change

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?

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?

15 hours ago, bangank36 said:

Do you mean this scrollbar?

yes

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

My testing

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?

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

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.

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.

 

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

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