How to remove overlay-scrollbars in Ubuntu 17.10 and 18.04?

Question

Since 17.10 solutions working in previous versions don't work anymore (E.g. N0rberts option 2 ("Remove overlay-scrollbar stuff") in Gtk-Message: Failed to load module "overlay-scrollbar" Ubuntu 17.10.).

Solution 1

The reason why solutions working in older Ubuntu versions do not work anymore are changes in CSS which GTK+ uses for styling and layout.

Put this into your ~/.config/gtk-3.0/gtk.css (create the file, if necessary):

/*************
 * scrollbar *
 *************/

.scrollbar,
scrollbar {
    -GtkScrollbar-has-backward-stepper: 1;
    -GtkScrollbar-has-forward-stepper: 1;
}

scrollbar slider {
    background-color: @scrollbar_track_color;
}

.scrollbar.vertical slider,
scrollbar.vertical slider {
    min-height: 15px;
    min-width: 10px;
}

.scrollbar.horizontal.slider,
scrollbar.horizontal slider {
    min-width: 15px;
    min-height: 10px;
}

.scrollbar.vertical.slider:hover,
scrollbar.vertical:hover slider {
    min-width: 10px;
}

.scrollbar.horizontal.slider:hover,
scrollbar.horizontal:hover slider {
    min-height: 10px;
}

.scrollbar.contents,
scrollbar contents {
    background-color: transparent;
    background-image: none;
    background-size: 0;
    border: none;
    border-radius: 0;
}

.scrollbar.trough,
scrollbar trough {
    background-image: none;
    border: none;
}

.scrollbar:hover:backdrop,
.scrollbar.dragging:backdrop,
scrollbar:hover:backdrop,
scrollbar.dragging:backdrop {
    background-color: alpha(@backdrop_selected_bg_color, 0.5);
}


.scrollbar.vertical:hover:dir(ltr),
.scrollbar.vertical:active:dir(ltr),
scrollbar.vertical:hover:dir(ltr),
scrollbar.vertical:active:dir(ltr) {
    margin-left: 0px;
}

.scrollbar.vertical:hover:dir(rtl),
.scrollbar.vertical:active:dir(rtl),
scrollbar.vertical:hover:dir(rtl),
scrollbar.vertical:active:dir(rtl) {
    margin-right: 0px;
}

.scrollbar.horizontal:hover,
.scrollbar.horizontal:active,
scrollbar.horizontal:hover,
scrollbar.horizontal:active {
    margin-top: 0px;
}

.scrollbar.slider,
scrollbar slider {
    background-color: alpha(@backdrop_filling_bg, 0.75);
    border-radius: 10px;
}

.scrollbar.slider:hover,
.scrollbar.slider:active,
scrollbar slider:hover,
scrollbar slider:active {
    border-radius: 20px;
    margin: 0;
}


.scrollbar.vertical:dir(ltr):not(:hover):not(.dragging),
scrollbar.vertical:dir(ltr):not(:hover):not(.dragging) {
    margin-left: 0px;
}

.scrollbar.vertical:dir(rtl):not(:hover):not(.dragging),
scrollbar.vertical:dir(rtl):not(:hover):not(.dragging) {
    margin-right: 0px;
}

.scrollbar.horizontal:not(:hover):not(.dragging),
scrollbar.horizontal:not(:hover):not(.dragging) {
    margin-top: 0px;
}


.scrollbar.slider:hover,
scrollbar slider:hover {
    background-color: alpha(@backdrop_filling_bg, 0.6);
}

.scrollbar.slider:active,
scrollbar slider:active {
    background-color: @backdrop_filling_bg;
}

.scrollbar.slider:backdrop,
scrollbar slider:backdrop {
    background-color: alpha(@backdrop_filling_bg, 0.75);
}

.scrollbar.slider:hover:backdrop,
scrollbar slider:hover:backdrop {
    background-color: alpha(@backdrop_filling_bg, 0.6);
}

.scrollbar.slider:active:backdrop,
scrollbar slider:active:backdrop {
    background-color: @backdrop_filling_bg;
}

Put the same into /root/.config/gtk-3.0/gtk.css for getting the same scrollbar experience for root applications like Synaptic.

And this prevents the scrollbar from disappearing when you are inactive:

echo "GTK_OVERLAY_SCROLLING=0" >> /etc/environment

For changes to take effect you might need to restart applications resp. log out and in again.

I am not completely satisfied with this solution though because the scrollbars do not look as "professional" as one might expect and because they look different in different applications. E.g. the steppers look OK in Firefox - the up and down arrows are visible. In Gnome Terminal and Nautilus they are just some rounded rectangles without arrows (as well as in the application I am developing).

Other applications come with their "own" scrollbars - e.g. Geany. They are completely unaffected by these settings and still look as one would expect from decent scrollbars. Maybe someone can figure out how to "steal" them from Geany. Update: In 18.04 Geany does not come with it's own scrollbars anymore but e.g. FBReader and Gimp still do.

However, getting rid of the warping slider still works in the old way:

echo "gtk-primary-button-warps-slider = false" >> /etc/gtk-3.0/settings.ini

Solution 2

Possible solution is to switch theme from Ambiance or Radiance to Adwaita with gnome-tweaks:

1. Install gnome-tweaks with sudo apt-get install gnome-tweaks
2. Launch gnome-tweaks
3. Go to Appearance tab, in Themes expand Applications and select Adwaita here.

Or switch to GTK3 port of Clearlooks theme (install it with sudo apt-get install clearlooks-phenix-theme).

I did not find css-driven solution yet.

Comments

[Boann]

Thanks, this ordeal worked, but I don't understand why they don't just fix the underlying bug. Scrollbars are an extremely basic UI feature and it's absurd that Linux still can't get them to stay visible reliably.

[NXT]

This works for me in KUbuntu 18.04, with the exception that in Firefox 70.0.1 it makes the scrollbar thumb invisible.