Applying CSS styles from Site Settings for Scrollbar Not Working

Design help Custom code
1

Hello! I am trying to apply styles for the scrollbar by placing the custom CSS code in the Settings section of the site (under custom code and in the Head Code) and applying the class to the body (or the “filter_options” div in the project) but I’m not seeing any difference when applied.

Any thoughts?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Adding my live link as well. Sorry, I forgot to include that:

3

hi @justincase try to select body instead scroll. I was not able to find element with scroll class except CSS code in your head styles.
Code should look like this. When I inject it … scrollbar changed

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

/*track*/
body::-webkit-scrollbar-track {
  background:rgba(255, 255, 255, 0);
}

/*thumb*/
body::-webkit-scrollbar-thumb {
  background:rgb(75, 80, 88);
  border-style:solid;
  border-radius:10px;
}
1 Like
4

Sorry for the delayed response. I was expecting to see a notification in my email if someone replied and I never saw it :slight_smile: This worked for me. How would apply the same thinking to scrollbars that aren’t the main page? For example, on a collection list that has a horizontal scrollbar that auto shows?

5

hi @justincase this approach is a general principle that can be applied on any element that has scroll, just change class body for class of targeted element or use wildcard *.

Article

and if you do not know how to code CSS there are generators.

Generator example

http://webkit-scroll-gen.sourceforge.net

1 Like
6

@Stan Super helpful! That wildcard tip off. Love it. Thanks for sharing these.

1 Like