Hide Scrollbars on OSX


#1

Recently, I’m getting perpetually visible square scrollbars rather than the hidden mac style scrollbars that atom used to use. I assume this is a theme-level-change, does anyone know off hand css settings that will hide the scrollbars, or what recent change I need to look into?

Theme : https://atom.io/packages/spacegray-dark-ui

Note the horizontal & vertical scollbars in the content area and in the tree view:


#2

Unfortunately, I don’t know the CSS to do what you’re looking for, I’m Not a CSS Guy™. Perhaps @braver or @simurai can help?


#3

There’s two things to look for first:
What’s the setting for scroll bar visibility on your Mac?
Is it just in this theme?


#4

Everywhere else in OSX the scrollbars are hidden.


#5

These lines from the spacegray-dark-ui theme are causing this. You can style the scrollbars from your own stylesheet with:

atom-text-editor /deep/ ::-webkit-scrollbar {
  &-track { ... }
  &-corner { ... }
  &-thumb { ... }
}

I don’t know everything that can be done with the scrollbars, but you can play around with it.


#6

Oh nice, thanks @olmokramer.

Adding this to my styles.less fixed it. Thanks again!

.tree-view-resizer, atom-text-editor /deep/ ::-webkit-scrollbar { 
  width: initial; 
  height: initial;
  &-track  { background-color: initial; }
  &-corner { background-color: initial; }
  &-thumb  { background-color: initial; }
}

(edit : simplified snippet)