How does one add a custom scrollbar to a custom scrollbox?

Hello everyone

I have a scrollbox that I've implemented, but I want to change the design of the scrollbar.

This is the CSS code as of now:

//scrollbox
.scrollBox {
 height: 520px;
 width: 100%;
 border: 2px solid rgba(60,219,192,.2);
 overflow: auto;
 margin-right: 0%;
 margin-left: 0%;
 padding: 20px;
 font-size: 15px;
}

I've tried to implement parts of the code linked here, but with no success...
I want a similar result as the example through the link had.

Could anyone help me?

2 hours ago, Sahil007 said:

Hello everyone

I have a scrollbox that I've implemented, but I want to change the design of the scrollbar.

This is the CSS code as of now:

//scrollbox
.scrollBox {
 height: 520px;
 width: 100%;
 border: 2px solid rgba(60,219,192,.2);
 overflow: auto;
 margin-right: 0%;
 margin-left: 0%;
 padding: 20px;
 font-size: 15px;
}

 

I've tried to implement parts of the code linked here, but with no success...
I want a similar result as the example through the link had.

Could anyone help me?

Can you share your site with the protected password so we can take a look?

On 12/14/2021 at 5:33 PM, bangank36 said:

Can you share your site with the protected password so we can take a look?

https://carrot-lettuce-xtcb.squarespace.com/

Password: Temp

2 hours ago, Sahil007 said:

https://carrot-lettuce-xtcb.squarespace.com/

Password: Temp

Try adding to Home > Design > Custom Css

/*width of scrollbar*/
.scrollBox::-webkit-scrollbar {
  width: 1em;
}

/*color of scroll bar*/
.scrollBox::-webkit-scrollbar-track {
  background: purple;
}

/*color of scroll button*/
.scrollBox::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

Reference: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Change the style which meets your requirement

Hope it can help you

Support me by pressing 👍 if this useful for you

On 12/16/2021 at 6:43 AM, Beyondspace said:

Try adding to Home > Design > Custom Css

/*width of scrollbar*/
.scrollBox::-webkit-scrollbar {
  width: 1em;
}

/*color of scroll bar*/
.scrollBox::-webkit-scrollbar-track {
  background: purple;
}

/*color of scroll button*/
.scrollBox::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

Reference: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Change the style which meets your requirement

Hope it can help you

Support me by pressing 👍 if this useful for you

Hi there! Thanks @Beyondspace! This worked great, but I ran into an issue with the way it displays, any chance you could help?

On 12/18/2022 at 3:37 PM, PatrickJ said:

Hi there! Thanks @Beyondspace! This worked great, but I ran into an issue with the way it displays, any chance you could help?

 

Do you mean making the color change for scrollbar that is based on the content it scrolls over?

On 12/19/2022 at 7:33 AM, Beyondspace said:

Do you mean making the color change for scrollbar that is based on the content it scrolls over?

Correct! More specifically the track for the scrollbar, the scrollbar I would like to remain blue the whole time.