Styling and Hiding Scrollbars in CEP Extension

[boguslavsky]

I'm developing a panel extension using CEP 9 and it has accordion-like features to show and hide options in the panel. Sometimes, when multiple options sections are expanded, the content overflows the height of the panel, which causes a scroll bar to show up on the right side.

Is there a way to hide the scrollbar while retaining the ability to scroll, and is there a way to style the scrollbar so it looks more native to the software as opposed to looking like it's from an internet browser?

[Inventsable · Accepted solution]

Hi, this is the CSS that I personally use:

#app::-webkit-scrollbar {
  display: block;
}
body::-webkit-scrollbar {
  width: 0px;
}
::-webkit-scrollbar {
  background-color: var(--color-scrollbar);
  width: var(--width-scrollbar-track);
}
::-webkit-scrollbar-thumb {
  width: var(--width-scrollbar-track);
  background: var(--color-scrollbar-thumb);
  border-radius: var(--radius-scrollbar-thumb);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}
::-webkit-scrollbar-resizer {
  display: none;
  width: 0px;
  background-color: transparent;
}
::-webkit-scrollbar-button {
  height: 0px;
}
::-webkit-scrollbar-corner {
  display: none;
}

The CSS variables for color are from my personal CEP styling library, starlette. It's very easy to use and handles all app styling, theme changes, and provides 40+ UI colors. You can see an example of Starlette and scrollbars (which are SVG below, but look identical in the panel) here:

There's absolutely no Javascript involved for app theme changes. All you need are the CSS variables as values to your color like the snippet above.

For wrapping, you might have luck with setting the root container (body or a particular div) with overflow: auto. This should hide scrollbars when content within doesn't expand, and only show when there's calculated overflow. If you want to permanently disable it, you can just set width: 0px; or display: none; which should allow scrolling but cause the scrollbar to be invisible. The above snippet has body scrollbars like this because I use a framework within an #app element.

Here's the original CSS Tricks article that led me to do this, with some more explanation and sample.... Note that you only need webkit styling, since CEP is done in a Chromium container.