Hide #nav-tree scrollbars for chromium browsers

[ghost]

The ::-webkit-scrollbar CSS extension will hide the scrollbars without disabling #nav-tree scrolling ability.

https://user-images.githubusercontent.com/83611172/129077130-d71d2fa4-2116-4f06-8109-fd71951a3579.mp4

[jothepro]

First of all: Thanks for you contribution! I'm not sure if I like that, though. While it looks a lot cleaner for sure, it hides the critical information that the view is scrollable. 🤔 I'll think about it... Maybe as an option that is disabled by default?

[ghost]

First of all: Thanks for you contribution! I'm not sure if I like that, though. While it looks a lot cleaner for sure, it hides the critical information that the view is scrollable. 🤔 I'll think about it... Maybe as an option that is disabled by default?

Thank you for your feedback. Instead, I suggest the following extensions: -webkit-scrollbar, -webkit-scrollbar-thumb and -webkit-scrollbar-track. Below is a non-tweaked sample to demonstrate the result. You may adjust it to represent doxygen-awesome-css light and dark color scheme and padding. 🙂
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

nav-tree

#nav-tree::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#nav-tree::-webkit-scrollbar-thumb {
  background: rgb(90 90 90);
}

#nav-tree::-webkit-scrollbar-track {
  background: transparent;
}

code:

code::-webkit-scrollbar, div.fragment::-webkit-scrollbar, pre.fragment::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

code::-webkit-scrollbar-thumb, div.fragment::-webkit-scrollbar-thumb, pre.fragment::-webkit-scrollbar-thumb {
  background: rgba(90, 90, 90);
}

code::-webkit-scrollbar-track, div.fragment::-webkit-scrollbar-track,  pre.fragment::-webkit-scrollbar-track {
  background: transparent;
}

global:

- chrome bug: The browser vertical scroll is rendered invisible. Requires JS and the above #nav-tree to avoid.
- https://stackoverflow.com/a/66069228

::-webkit-scrollbar {
  height: 10px;
}

::-webkit-scrollbar-thumb:horizontal {
  background: rgba(90, 90, 90);
}

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

[jothepro]

Styling the scrollbars in a way that was satisfactory to me was harder than expected. While the changes that you propose fix the scrollbars on Windows/Linux, they have the side effect that the default scrollbars on macOS are also overwritten, which IMO leads to a worse experience on the platform.

I've added an experimental separate stylesheet that looks and behaves similar to the macOS scrollbars, to better blend in on the platform while also looking good on Window/Linux: doxygen-awesome-fancy-scrollbars.css

Let me know what you think about it!

https://user-images.githubusercontent.com/21294002/152699943-0f74677a-8177-4c85-89f8-25708bca9cab.mov

And I've additionally fixed Firefox scrollbars as well! 😊 Scrollbar-styling on Firefox is limited but it's better than nothing:

(Don't mind the other visual changes in the video/image, what you see is WIP of some other cool stuff that I am currently working on! 😊 )

[jothepro]

Resolved with https://github.com/jothepro/doxygen-awesome-css/commit/acfed44d30a8c0f2dcd33ed44db84c60db5c5466

Scrollbar styling is now enabled per default from v2.0.0 onwards.