[Solved] Hover display all scrollbars

Steve_yang · December 18, 2020, 10:23am

I just know hover display editor’s scrollbar.

.CodeMirror-vscrollbar {
    opacity: 0;
}

.CodeMirror-vscrollbar:hover {
    opacity: 1;
}

But I don’t know how to hover display preview mode 's scrollbar, and file pane 's vertical scrollbar and horizontal scrollbar.

and outline’s scrollbar .

I tried this code ,but doesn’t work. Please help .

::-webkit-scrollbar{
  background-color: transparent;
  width: 8px;
  opacity: 0;  
}

::-webkit-scrollbar:hover{
  opacity: 1;  
}

Thank you !

Lithou · December 18, 2020, 11:08am

Posted this on discord. Will post here if anyone is looking for the answer as well. Instead of opacity, use the visibility: hidden and visibility: initial to toggle items on hover. Visibility:hidden will hide the item, but it will still take up space so you can still hover/select it. Here’s a snippet example:

github.com

Lithou/Sandbox/blob/main/.obsidian/snippets/scrollbar.css

::-webkit-scrollbar {
    visibility: hidden;
     width: 10px; /* width of vertical scrollbars  */
    height: 100px; /* height of horizontal scrollbars  */
    border-radius: 50px; /* roundedness of scrollbar area */
    background-color: green; /* color of scrollbar area  */
}

::-webkit-scrollbar-thumb {
    visibility: hidden;
    background-color: red; /* color of scrollbar (part that moves) */
    border-radius: 0px; /* roundedness of scrollbar */
}

::-webkit-scrollbar:hover {
visibility: initial;
}
::-webkit-scrollbar-thumb:hover {
    visibility: initial;
}

This file has been truncated. show original

Steve_yang · December 18, 2020, 11:19am

Thank you so much !

my version:

::-webkit-scrollbar {
    visibility: hidden;
    background-color: transparent;
    width: 10px;
}

::-webkit-scrollbar-thumb {
    visibility: hidden;
}

::-webkit-scrollbar:hover {
    visibility: initial;
}

::-webkit-scrollbar-thumb:hover {
    visibility: initial;
}