Scrollbar issue

#1

Hello,

I’m using TiddlyDesktop and have configured the scrollbar with

html {
  --scrollbarBG: rgb(28, 28, 28);
  --thumbBG: #54524c;
}

/* Works on Firefox */
* { scrollbar-width: thin; }

/* for Chrome, Edge */
::-webkit-scrollbar, scrollbar-width { width: 8px; height:8px; }
::-webkit-scrollbar-track { background: var(--scrollbarBG); }

this looks like:

grafik
grafik410×600 73.6 KB

Setting the background of the scrollbar to transparent to see only the thumb
→ it works fine for the scrollbar of the tiddler and not for the scrollbar of the page

::-webkit-scrollbar-track { background: transparent; }

grafik
grafik639×889 65 KB

FYI: I’ve an image in the background and all my text-tiddlers have background transparent

grafik
grafik1410×892 74.1 KB

Any idea to get rid of them?

Thanks for feedback.
Stefan

#2

Not sure I’m following what you’re saying.

The scrollbar-color property takes two color values:

.something {
  scrollbar-color: <thumbcolor> <trackcolor>;
}

Does that help?

#3

Correct - thats what I’m using.

Checked also with this code/colors ($:/tags/Stylesheet):

/* SKINNY SCROLLBARS */
<pre>/* CHROME, EDGE, SAFARI, OPERA */
*::-webkit-scrollbar { width: 0.2em; }
*::-webkit-scrollbar:horizontal { height: 0.2em;  }
*::-webkit-scrollbar-track { border-radius: 0.25em; background-color: transparent; }
*::-webkit-scrollbar-thumb { border-radius: 0.25em; background-color: red; }
*::-webkit-scrollbar-corner { display: none; }
/* FIREFOX */
* { scrollbar-width: thin; }
</pre>

grafik
grafik997×1199 98.6 KB