Treestyletab: How to hide scrollbar in TST 2?

Created on 4 Nov 2017  路  7Comments  路  Source: piroor/treestyletab

Short description

Previous solution to hide scrollbar was found in #514, by adding code to userChrome.css, but this no longer works. I found one method, but maybe it can be improved?

Steps to reproduce

  1. Start Firefox with clean profile.
  2. Install TST.
  3. Add the following to "Extra style rules for sidebar contents"
:root.left #tabbar {
  overflow-y: scroll; /* always show scroll bar space */
  margin-left: -15px;
}

It works but the context menu gets cut off:

screen shot 2017-11-04 at 2 39 22 pm

Is there a better method?

Environment

  • Platform (OS): macOS 10.12.6
  • Version of Firefox: 57.0b14
  • Version (or revision) of Tree Style Tab: 2.0.7.5527
workaround exists

Most helpful comment

The advantage to my example is that you don't get a glitch when transitioning from scrolling to not scrolling, where the scrollbar appears for a brief moment.

Ok, I did this, which seems to fix the menu cutoff:

#tabbar { 
  overflow-y: scroll;
}

:root.left #tabbar,
#tabContextMenu,
#tabContextMenu ul {
  margin-left: -15px;
}

:root.right #tabbar {
  margin-right: -15px;
}

That's only for the sidebar on the left. [edit: updated to work for left or right side style.] I don't really have much experience with CSS, just kind of poking around... anyway I'll add it to the code snippets in the wiki unless anyone has more suggestions.

All 7 comments

I use just: #tabbar.overflow { margin-left: -17px; }

However I am seeing the same thing as you if the width of the sidebar is too narrow. Without this CSS, the right-click menu display logic works properly even with a narrow sidebar.

The advantage to my example is that you don't get a glitch when transitioning from scrolling to not scrolling, where the scrollbar appears for a brief moment.

Ok, I did this, which seems to fix the menu cutoff:

#tabbar { 
  overflow-y: scroll;
}

:root.left #tabbar,
#tabContextMenu,
#tabContextMenu ul {
  margin-left: -15px;
}

:root.right #tabbar {
  margin-right: -15px;
}

That's only for the sidebar on the left. [edit: updated to work for left or right side style.] I don't really have much experience with CSS, just kind of poking around... anyway I'll add it to the code snippets in the wiki unless anyone has more suggestions.

This definitely works well for me. I would say add it to the wiki and close this out.

Ok, I added it to the wiki...

To hide horizontal scroll in Firefox 57.0 on Mac OS X (10.11.6) I used

#tabbar { 
  overflow-x: hidden;
}

There's a problem with hidden scroll bar on macOS, since TST version 2.4.0.
Edit: nevermind, I see that there's now an option in the settings to hide the scroll bar.

In order for it to work in macOS, you must set "Show scroll bars: Always" in System Preferences, or use defaults write org.mozilla.firefox AppleShowScrollBars -string Always to set it only for Firefox.

Do you have an idea how to make it show only on mouseover?

Was this page helpful?
0 / 5 - 0 ratings