Share your knowledge at the LQ Wiki.
Go Back > Blogs > linux-related notes
User Name


Just annotations of little "how to's", so I know I can find how to do something I've already done when I need to do it again, in case I don't remember anymore, which is not unlikely. Hopefully they can be useful to others, but I can't guarantee that it will work, or that it won't even make things worse.
Rate this Entry

Chrome/ium userstyle that creates larger buttons for scrolling up and down.

Posted 07-08-2019 at 02:41 PM by the dsc
Updated 07-08-2019 at 02:54 PM by the dsc

I mostly use the scrollbar as "buttons," clicking below or above the handler, rather than grabbing the handler itself. So when I've scrolled down quite a bit, I'll often mistakenly click above the handler when I really wanted to scroll down. That's kind of possibly solved if those barely useful up and down buttons were large enough to be more useful than pressing page up, down, or arrow keys instead. So this usercss does that:

::-webkit-scrollbar {
  width: 12px;
  /*border: 5px solid white; */


::-webkit-scrollbar-thumb {
  background-color: #626262;
  background-clip: padding-box;
  border: 0.05em solid #626262;

::-webkit-scrollbar-track {
  background-color: #bbbbbb;
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #e3e3e3;
  display: block;
  border-style: solid;
  height: 18%;
  width: 12px;
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 4px 4px 4px;
  border-color: transparent transparent #555555 transparent;

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 4px 4px 0 4px;
  border-color: #555555 transparent transparent transparent;
Somewhat of a frankenstein monster of a couple of things I've found around stack-exchange-like sites or SE itself.
The scrollbar itself is made narrower, colors are changed a bit from the defaults. Up and down buttons have 123 pixels of height which is quite more area than whatever is the default.

Applied with the "stylus" extension, not to be confused with "stylish," even though both do the same thing. Stylish is supposedly bloated or whatever, whereas Stylus is open-source.

Now I noticed it also affects scroll bars within pages, so it's better to have it somewhat wider than just 8 meager pixels. On maximized windows it works okay for the main scrollbar on the right, the screen edge kind of makes it easier to hit it, but otherwise it requires quite a good aim. Changed to 12 now. I guess the default is a bit larger, though.

Having the button's height in percent also seems to be better. 18% seems roughly the same size I had them with 123 pixels.

Just noticed I've been "blogging" here for a little bit more than 10 years already. Time flies.
Posted in Uncategorized
Views 2175 Comments 0
« Prev     Main     Next »
Total Comments 0




All times are GMT -5. The time now is 01:13 PM.

Main Menu
Write for LQ is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration