Scrollbars are becoming a problem

2023-10-12

Scrollbars. Ever heard of them? They’re pretty cool. Click and drag on a scrollbar and you can move content around in a scrollable content pane. I love that shit. Every day I am scrolling on my computer, all day long. But the scrollbars are getting smaller and this is increasingly becoming a problem. I would show you screenshots but they’re so small that even screenshotting them is hard to do. And people keep making them even smaller, hiding them away, its like they don’t want you to scroll! “Ah”, they say, “that’s what the scroll wheel is for”. My friend, not everyone can use a scroll wheel or a swipe up touch screen. And me, a happy scroll-wheeler, even I would like to quickly jump around some time.

Why it matters

Ok so a lot of folks have fine motor control problems. Others use somewhat inaccurate pointing devices like eye-trackers (they’re very impressive, but not good enough for your 8 pixel wide scrollbar!!). And these people, they wanna scroll! When my friend is voice/sound controlling their computer (with Talon Voice which is really good btw you should try it), they don’t wanna say “scroll down” over and over again or start auto scrolling and try to land in the right spot. They wanna just look at the scrollbar and click on the spot they wanna be looking at. You click on the spot and the content goes there! It’s THE GOOD STUFF!!!

I am not the first to notice this. See this post too in 2015 discussing this problem. I’d hate to go back in time only to tell them nothing has improved.

“The simple fact that these skinny scroll bars exist are evidence that designers do not sit with non technical users to conduct usability testing. Because if they did that they would immediately discover the problem.

People with dexterity and hand control challenges have a difficult time with these skinny scroll bars.

People with eye sight challenges suffer with these skinny scroll bars.”

The Problems

People keep making the bar smaller! Or trying to get rid of it! I’m naming names of software I use day to day, but it’s not just them, people are doing this even outside the world of Linux.

In some of the cases the problem is actually that the bar is precisely the same size it always has been (in pixels), but monitor resolutions are much higher than when that bar width was first chosen, and bars haven’t started scaling to keep up, but in other cases the bars are actually getting smaller. Gods, remember the needle-bar Ubuntu tried to introduce for a bit? lmao.

And while the bars were shrinking, another feature silently disappeared: buttons to click and hold down to scroll left/right in increments. Arrow-keys largely hold this functionality now, but are dependent on what content is in focus. Buttons were not dependent on this. Actually, some of you might not even know what I’m talking about. These:

OS X screenshot with the scroll buttons highlighted

I don’t use these! But I added it into this post on request of someone who does, and wants them back.

By and large the trend that persists is, the bars get less usable, and either there are no user-configurable ways to fix them, or the ability to configure the options are buried so deep into the tech stack that no normal user can find them. I’m extremely technical. Many of my friends are not, and it’s their troubles that have driven me to write this post.

GTK

In GTK2, you could modify scrollbar widths directly in your gtkrc, and GUI programs existed to do this. In GTK3, this is CSS. Which, OK I guess, but there hasn’t really been a good user-friendly way to set it unless you understand theming. I found this reddit thread with a good script for it, which I’ll reproduce here in the likely event that reddit dies. Put this in a .sh file and run it if you need.

#!/bin/bash

echo "NEW SCROLLBAR WIDTH(px) OR TYPE 'r' TO RESET"
while true; do
    read uin
    uin=$(echo "$uin" | xargs) # trim
    uin=$(echo "${uin,,}") # lower case

    if [[ "$uin" =~ ^[1-9][0-9]?$ || "$uin" == "r" ]]; then

        # RESET

        # remove previous width in gtk.css (if any)
        if [ -f "$HOME/.config/gtk-3.0/gtk.css" ]; then
            if [[ $(grep -v "slider { min-width" "$HOME/.config/gtk-3.0/gtk.css") ]]; then
                grep -v "slider { min-width" "$HOME/.config/gtk-3.0/gtk.css" > tmpfile && mv tmpfile "$HOME/.config/gtk-3.0/gtk.css"
            else
                rm "$HOME/.config/gtk-3.0/gtk.css"
            fi
        fi
        if [ -f "$HOME/.config/gtk-4.0/gtk.css" ]; then
            if [[ $(grep -v "slider { min-width" "$HOME/.config/gtk-4.0/gtk.css") ]]; then
                grep -v "slider { min-width" "$HOME/.config/gtk-4.0/gtk.css" > tmpfile && mv tmpfile "$HOME/.config/gtk-4.0/gtk.css"
            else
                rm "$HOME/.config/gtk-4.0/gtk.css"
            fi
        fi

        # reset scrollbar visibility
        gsettings reset org.gnome.desktop.interface overlay-scrolling

        # reset flatpak overrides
        if [[ "$(flatpak --version 2>&1)" =~ ^Flatpak ]] && [ -f "$HOME/.local/share/flatpak/overrides/global" ]; then
            sed -i 's|xdg-config/gtk-3.0;||g' "$HOME/.local/share/flatpak/overrides/global"
            sed -i 's|xdg-config/gtk-4.0;||g' "$HOME/.local/share/flatpak/overrides/global"
            # if the those were the only filesystem overrides, remove the filesystems= line
            grep -vx "filesystems=" "$HOME/.local/share/flatpak/overrides/global" > tmpfile && mv tmpfile "$HOME/.local/share/flatpak/overrides/global"
            # if there are no other overrides, remove the flatpak global overrides file
            if [[ ! $(grep -vx "\[Context\]" "$HOME/.local/share/flatpak/overrides/global") ]]; then
                rm "$HOME/.local/share/flatpak/overrides/global"
            fi
        fi

        # APPLY NEW SETTINGS

        if [[ "$uin" =~ ^[1-9][0-9]?$ ]]; then
            # add new width in gtk.css
            echo "slider { min-width: ${uin}px; min-height: ${uin}px; }" >> "$HOME/.config/gtk-3.0/gtk.css"
            echo "slider { min-width: ${uin}px; min-height: ${uin}px; }" >> "$HOME/.config/gtk-4.0/gtk.css"

            # apply to flatpak (if installed)
            if [[ "$(flatpak --version 2>&1)" =~ ^Flatpak ]]; then
                flatpak override --user --filesystem=xdg-config/gtk-3.0 --filesystem=xdg-config/gtk-4.0
            fi

            # make scrollbar always visible
            gsettings set org.gnome.desktop.interface overlay-scrolling false
        fi

        echo "LOGOUT FOR EVERYTHING TO BE APPLIED"
        read hold
        exit 0
    else
        echo "Invalid input, try again."
    fi
done

Naturally the script has to override flatpak separately because heaven forbid my flatpak applications look the way I themed my system. They’ve also started hiding the scrollbar entirely by default until you hover over where it’s supposed to be, what is that???? You can get it back in GTK 3 if you know the right command line command to type in. (the script above does this too btw)

gsettings set org.gnome.desktop.interface overlay-scrolling false

Or you can find it in the GUI if you know how to navigate the Dconf Editor, I guess. lol. Though in GTK 4, you can’t even set this setting globally. See this thread right here, which to the best of my knowledge is still true as of writing.

> > Who ever said they were going to "go"? The API to make an application use
> > them is still there. Programs used frequently on tablets or such can take
> > feature requests to have their own options to use non-overlay scrollbars.
> 
> So I just need to file a feature request against every gtk application that I
> use?
> And when I install GNOME I'll need to go into each application and enable it.

One person asks another 'did you just tell me to go fuck myself'? The other person replies 'I believe I did, bob!'

Qt

To quote /u/cfeck_kde on /r/kde:

“The width of Qt scrollbars is determined by the Qt widget style plugin you are using. As far as I know, only the Skulpture style allows configurable sizes. For other styles like Breeze, you would need to change the C++ source and recompile.”

On the one paw, recompile my GUI theme? - but hey I’m a gentoo user I do that every friday anyway, I could just drop a patch in I guess… RECOMPILE MY GUI THEME??

I repeat,

One person asks another 'did you just tell me to go fuck myself'? The other person replies 'I believe I did, bob!'

But on the other paw, because Qt style plugins are real code they do get to have a lot more power here if you find one that lets you change what you want. I use Kvantum personally. I can’t seem to find a setting in its configuration to change scrollbar width, but I can disable scrollbar disappearing (which it calls “Transient scrollbars”) so that’s nice.

Anyways, I tried out Skulpture like the reddit person recommended and it seems kinda cool, give it a try! I can’t figure out a way to configure it with a GUI though without using KDE Plasma though. No shade on Plasma, I just don’t have it installed right now to try it out, but maybe if you’re a plasma user it’ll be good for you.

Still, if our only hope is this one theme engine that may or may not keep working as Qt development continues, I can’t help but feel like the war is being lost.

Firefox

Firefox has also joined the war on scrollbars it seems, with an incredibly tiny scrollbar on the side of my screen. Thankfully, Firefox is at least fixable (for now…), but you have to go into about:config to do it which is never a great sign. HOWEVER, you CAN do it.

Type in about:config in your address bar
Search for widget.non-native-theme.scrollbar.size.override
Edit it to whatever number you want
You can also edit widget.non-native-theme.scrollbar.style to change the shape of it, set it to 4 for a nice chonk rectangle
Finally, turn on “Always show scrollbars” in the normal settings window about:preferences if you want them always on.

Here, I set the size to 50. I don’t want it this big myself but by goly am I glad I can make it this big anyway. Behold, scrollbar glory:

the scrollbar is HUGE

EDIT: Go check out this response post from Athena Lilith Martin where she explores some extra settings to improve firefox’s scrollbars further, including disabling web page CSS overrides.

Chrome

Imagine being able to configure anything useful in chrome ever.

Electron

For that matter, imagine configuring an Electron app. Couldn’t be me. Or anyone else, for that matter. Maybe you can inject some custom CSS into the electron app to fix things up? Honestly if you have solutions for Chrome or Electron please tell me because I have no idea.

THERE ARE MORE

Look these are just the ones I encounter regularly, but all of these so-called “modern design principles” seem to be in a war against scrollbars and everyone that uses computers slightly different from the people implementing this are suffering as a consequence. Shit sucks yo!

The Best

OK you know what rules though? You know what I love, what my friend who uses eye trackers loves, what my friends who use tablet pens love? MINIMAPS

big rectangle with content

YEAH!!!!!!!!!

I can see the content. I can click the content. I can go to the content. And the hit target is massive. What more could a girl want?