Option to auto-hide vertical scrollbar

[hethhhhh]

Can you please add an option or CSS so that the vertical scrollbar auto-hides (and show it on mouse scroll for example)

Thank you.

[Keith94]

#tabbar.overflow {
  margin-right: -16px;
}
#tabbar:hover {
  margin-right: 0px;
}

[hethhhhh]

That's great, but the transitions doesn't work :(

[piroor]

How about this?

:root.left-scrollbar #tabbar.overflow {
  margin-left: calc(0px - var(--scrollbar-size));
  transition: margin-left ease 0.25s 0.4s;
}
:root.right-scrollbar #tabbar.overflow {
  margin-right: calc(0px - var(--scrollbar-size));
  transition: margin-right ease 0.25s 0.4s;
}

:root.left-scrollbar #tabbar.overflow:hover {
  margin-left: 0;
}
:root.right-scrollbar #tabbar.overflow:hover {
  margin-right: 0;
}

:root.left-scrollbar.narrow-scrollbar #tabbar.overflow:hover {
  margin-left: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}
:root.right-scrollbar.narrow-scrollbar #tabbar.overflow:hover {
  margin-right: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}

[hethhhhh]

this one doesn't hide it at all

[piroor]

How it broken? It works on my environment as expected so I cannot imagine how I should "fix" it. Could you attach screenshots?

[hethhhhh]

I cleaned up some code in the Extra style rules and now it works! Probably something left over like a bracket.
Thanks a lot!

[piroor]

I've added the code to the snippets: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#auto-hide-scrollbar-1923

[nh2]

For me margin- no longer works.

This works for me, replacing all margin- bits by nothing:

:root.left-scrollbar #tabbar.overflow {
  left: calc(0px - var(--scrollbar-size));
  transition: left ease 0.25s 0.4s;
}
:root.right-scrollbar #tabbar.overflow {
  right: calc(0px - var(--scrollbar-size));
  transition: right ease 0.25s 0.4s;
}

:root.left-scrollbar #tabbar.overflow:hover {
  left: 0;
}
:root.right-scrollbar #tabbar.overflow:hover {
  right: 0;
}

:root.left-scrollbar.narrow-scrollbar #tabbar.overflow:hover {
  left: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}
:root.right-scrollbar.narrow-scrollbar #tabbar.overflow:hover {
  right: calc(var(--narrow-scrollbar-size) - var(--scrollbar-size));
}

[nh2]

My fix above now no longer works since the most recent update of TST or Firefox; it now makes tab labels invisible: #2200 (comment)

[nh2]

It looks like the automatic calculation of the offset using var(--scrollbar-size) no longer works.

I've made it work hardcoding some pixels (including only the case where the scrollbar is on the left, as I couldn't make it work with the snippet that puts the bar on the right):

/* Auto hide scrollbar */

:root.left-scrollbar #tabbar.overflow {
  left: -5px; /* calc(0px - var(--scrollbar-size)); */
  transition: left ease 0.25s 0.4s;
}

:root.left-scrollbar #tabbar.overflow:hover {
  margin-left: 0;
}

:root.left-scrollbar.narrow-scrollbar #tabbar.overflow:hover {
  left: 0px; /* calc(var(--narrow-scrollbar-size) - var(--scrollbar-size)); */
}

[piroor]

The scrollbar in the sidebar is now controlled with the CSS property scrollbar-width, so I removed custom properties to define the scrollbar size. I've updated code snippets to follow the change:
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#auto-hide-scrollbar-1923

[nh2]

@piroor Thank you, that works well!

[irvinm]

The scrollbar in the sidebar is now controlled with the CSS property scrollbar-width, so I removed custom properties to define the scrollbar size. I've updated code snippets to follow the change:
https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#auto-hide-scrollbar-1923

Can anyone still confirm this snippet still works? (Obviously the 3.0.5+ version) I was reviewing my TST CSS and saw that I had it in there, but my scrollbar was always being displayed. (FF 70.0.1 \ TST 3.2.5)

[irvinm]

For my situation, I found a simplified solution that works nicely using the "none", "thin", and "auto" standard values.

/* hide scrollbar until hovering over tabs */
#tabbar.overflow { scrollbar-width: none; } 
#tabbar.overflow:hover { scrollbar-width: thin; }