How increase Scrollbar width ver 1.23.3


how increase Scrollbar width in atom ver 1.23.3??

i tried the following:

atom-text-editor .vertical-scrollbar {
    width: 50px !important;  // has to be bigger than webkit-scrollbar
atom-text-editor .horizontal-scrollbar {
    height: 50px !important;  // has to be bigger than webkit-scrollbar

but still not working


I don’t know how to increase the scrollbar width, but the current latest version of Atom is 1.24.0, so you should update.


As far as I can tell, .vertical-scrollbar and .horizontal-scrollbar are wrappers for the scrollbars, not the scrollbars themselves.

This should work:

atom-text-editor {
  ::-webkit-scrollbar {
    width: 50px !important;
    height: 50px !important;  

Likewise, if you wanted to change the background color of the scroll-bar track, you would set the background-color on ::-webkit-scrollbar-track, not *-scrollbar.

Keep in mind that the above will only style the scrollbar in the editor, not the settings view and other dialogs.

Further reading:

    // style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);

  // scroll bar size
  ::-webkit-scrollbar {
    width: 20px !important;
    height: 500px !important;
    //background-color: green !important;

So this works, and so does the “background-color” option that I have commented out.
HOWEVER , as soon as I go to another tab that is open, the formatting is not there, and it disappears on the original windows that were open that has the formatting applied when I did that change.
This is in the styles.less file or if you go to File --> Stylesheet… (both lead to the same place).
Am I not editing the correct one? Or is there something else I am missing? Could it be an issue with the UI or Text Editor Theme that I am using that is causing this issue?