Webkit/GNOME Web Custom Scrollbar Styling (Edit: plus add'l GTK3 CSS)

[amarok]

If, like me, you can’t stand faint, razor-thin, disappearing scrollbars such as this one in Web:

… even if they “allow” you to enlarge them a teeny-tiny bit if you hold them for a few seconds:

… then you can easily change them with a simple CSS (Cascading Style Sheets) entry. Go to Preferences > Appearance, and enable Use Custom Stylesheet, then tap the pencil/Edit icon:

Add the following entry to enlarge and darken the scroll track and its thumb button, while also disabling the “hiding” property:

Now, whenever you have a page with lengthy content, you’ll see a more easily usable scrollbar (vertical and/or horizontal):

You can adjust the colors, darkness, and width to your personal preferences. I use the Color Picker application to easily find the code for any particular color or shade. For instance, replace #f1f1f1 in the CSS entry with #D3D7CF to darken the scrollbar track a little:

Note that the scrollbar on the Librem 5 (in Web) goes in the opposite direction from what you might think (“natural scrolling”), because it’s a touchscreen device, but the modified scrollbar might still be useful for you, as it allows you to touch the scroll track to easily skip down or up through the page just by tapping it, rather than flicking repeatedly by finger motion.

On desktop, the change is a lot more useful, and you won’t have to rely solely on a mouse, scrollwheel, space bar, shift-space bar, etc., to move up or down a page.

EDIT: There probably exists a GNOME setting somewhere that allows you to reverse scrolling direction if you want to.

[amarok]

Here’s the CSS entry, if you want to just copy and paste it:

/* width */
::-webkit-scrollbar {
  width: 14px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #D3D7CF;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

[spacemanspiffy]

I know you can do this with FF too, but I really love how GNOME Web makes it an accessible and obvious feature by putting that right in the settings.

I too an not crazy about those razor thin scroll bars. My fingers aren’t very fat, but they are too fat for that :).

[amarok]

@spacemanspiffy

I know you can do this with FF too, but I really love how GNOME Web makes it an accessible and obvious feature by putting that right in the settings.

Now we just need to find an about:config equivalent.
Although we do have dconf-Editor, gsettings commands, etc.

That, and also get certain Firefox extensions working in Web without crashing.

[amarok]

@amarok

EDIT: There probably exists a GNOME setting somewhere that allows you to reverse scrolling direction if you want to.

Lol… I’ve just discovered that pressing and holding the thumb control on scrollbars in Web, Files, and even on the home screen enables “unnatural” scrolling, i.e. turns off “natural scrolling” during the operation. Annoyingly, the scrollbars not modified by CSS are still razor-thin and difficult to grasp with any accuracy. (But there’s another method to deal with those; see my next comment below.)

As indicated in dconf-Editor, the default settings - apparently no need to change these - for mouse and trackpad are:
mouse: Natural scrolling false
trackpad: Natural scrolling true

Also can be set or changed with: gsettings set org.gnome.desktop.peripherals.mouse natural-scroll false
or true
same with ...desktop.peripherals.trackpad...

[amarok]

CSS general scrollbar modification for some other GTK applications (Files, Settings, Lollypop, etc., even the home screen):

1_ In /home/purism/.config, create a folder named gtk-3.0, if it doesn’t exist already.

2_ Then create a text document named gtk.css, if it doesn’t exist already.

3_ Inside the gtk.css document, add the following entry:

scrollbar slider {
    /* Size of the slider */
    min-width: 13px;
    min-height: 14px;
    border-radius: 14px;
}

You can decrease or increase the number of pixels (e.g.12px) as desired.

You can optionally change other properties, too, e.g.:

scrollbar slider {
    /* Size of the slider */
    min-width: 13px;
    min-height: 14px;
    border-radius: 14px;

    /* Color of the slider and track */
    scrollbar-color:  #BABDB6 #888A85;

    /* Padding around the slider */
    border: 1px solid transparent;
}

Save and close; restart phosh. Scrollbars will now be wider, but still hidden unless you’re scrolling.

P.S. I also use this method on my other computers to get more usable (for me) scrollbars.

[j_s]

@spacemanspiffy

I too an not crazy about those razor thin scroll bars. My fingers aren’t very fat, but they are too fat for that :).

I find them quite awkward on a desktop with a good mouse and nearly unusable with a touchpad, and almost completely unusable on a touch screen.

I also frequently forget that I have to fiddle around to make them show up.

I thought computers were supposed to get easier to use over time.