Scrollbar in Tiddlywiki

[kookma]

Is it possible to have a thinner scrollbar for right side bar? Does it make sense scrollbars follow the palettes colors?

See: https://css-tricks.com/almanac/properties/s/scrollbar-color/

[kookma]

In Chrome, Edge or Opera open https://tiddlywiki.com/

create a tiddler with below contents tagged with $:/tags/Stylesheet and note to the scrollbars.

/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

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

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

[AnthonyMuscio]

I tried this, in Chrome no handle to drag appears, in firefox no Apparent difference from normal.

[CodaCodr]

Hi Mohammad

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

Standards track: https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width

Also: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

[kookma]

@CodaCodr - Thank you! I myself prefer thin scrollbar specially with right sidebar.
Right now we have two thick scrollbars at the right (when a long list is opened in sidebar tabs)!

[pmario]

For me this works best with FF and webkit-based browsers: I'll create a plugin

html {
	scrollbar-width: thin;
}

.tc-sidebar-scrollable {
	scrollbar-width: thin;
}

.tc-sidebar-scrollable:hover {
	scrollbar-width: auto;
}

*::-webkit-scrollbar {
	width: .4em;
	height: .4em;
}

*::-webkit-scrollbar-thumb {
	background: #bbb;
}

.tc-sidebar-scrollable:hover::-webkit-scrollbar {
	width: .8em;
	height: .8em;
}

[pmario]

The plugin contains a simplified version

[CodaCodr]

I especially like...

.tc-sidebar-scrollable:hover {
	scrollbar-width: auto;
}

[pmario]

Yea, it makes it bigger on hover. So we actually know, which one to use ;)

[pmario]

The initial release for experiments is here: https://wikilabs.github.io/editions/thin-scrollbars/ No config settings atm. I'm not sure if I want to have a dynamic CSS just for this one.

I personally would prefer a hardcoded version. ... BUT theming may be an option ... We'll see

[kookma]

@pmario - thank you.

On hover I see the thick scrollbar again, I see this only on the sidebar.

I support having this into the core. The two thick scrollbars at the right side is not good.

[kookma]

I tried the below example

1. goto https://wikilabs.github.io/editions/thin-scrollbars/
2. set your palette to Desert Sand or Cupertino Dark
3. create a new tiddler with below content

<div style="max-height:240px; overflow:scroll;">
<$list filter="[range[1,100]]">
<$text text=<<currentTiddler>>/><br/>
</$list>
</div>

1. I see a small white square at the bottom of scrollbar
2. On hover the thickness is constant (which I prefer)

[pmario]

Use overflow-y:scroll; instead of overflow. ... The dot is a leftover from the x-scrollbar. Check with FF and you'll see it