Auto hide scroll bar when not triggered or hovered, and a much thinner scrollbar

[anobilisgorse]

Hello, I really liked what you did with the new update of Atom Material UI, but I very much prefer having a thinner scrollbar and auto hiding it.

Is there some other way where I can do it through my own styles.less?

Many thanks.

[silvestreh]

You could try something like this in your user styles…

.scrollbars-visible-always {
    /deep/::-webkit-scrollbar {
        width: 0.25rem;
        height: 0.25rem;
    }
}

[anobilisgorse]

But it won't auto-hide? I came upon that too and that solved my problem about the width, but regarding the auto-hide feature?

I thought it was .scrollbars-show-when-scrolled but it was not working.

[silvestreh]

Scrollbar visibility is controlled by the OS. In OS X scrollbars are disabled by default, the class scrollbars-visible-always is added when you set the OS to always show them. Windows always shows them… I'm not sure about Linux as there are quite a few window managers/desktop environments.

With that said, you could try something like this:

.scrollbars-visible-always {
    .tree-view-scroller {
        &::-webkit-scrollbar {
            display: none;
            width: 0.25rem;
            height: 0.25rem;
        }
        &:hover::-webkit-scrollbar {
            display: block;
        }
    }
}

As you can see, you would have to do this on a component by component basis, targeting specifically elements with overflow: scroll;.

[HoverBaum]

Awesome, just what I was looking for as well.

How would you actually go about doing the same for the editor? I just spend an hour trying to find documentation or code snippets on how to get to the scrollbar. Best I could find was

atom-text-editor::shadow  {
  ::-webkit-scrollbar {
    display: none;
  }
}

But that permanently hides the scrollbar.

[silvestreh]

@HoverBaum the editor doesn't use OS scrollbars. Having said that, the snippet you're after would look like this:

atom-text-editor::shadow {
    .horizontal-scrollbar, .vertical-scrollbar {
        opacity: 0;
        transition: opacity 250ms;
    }
    .scroll-view:hover .horizontal-scrollbar {
        opacity: 1;
    }
    .scroll-view:hover + .vertical-scrollbar {
        opacity: 1;
    }
}

[Log1x]

Thanks for that @silvestreh -- that works nicely. Only quirk is it's not setting opacity: 1; when the scrollbar its self is being hovered. I tried adding .horizontal-scrollbar:hover { opacity: 1; } but didn't have luck with that either.

Any ideas what I'd need to add to fix that inconsistency?