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

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

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.

I created picking up from various sites in the web (above all Linux mint forum) my own scrollbar for the theme Ambiance in Ubuntu 18.04. It has no overlays. You have to put the code it in the ~/.config/gtk-3.0/gtk.css eventually with other tweaks. Log out and log in to take effect. Use it if you like it:

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

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

scrollbar trough {
    background-color: shade(@theme_bg_color, 0.5);
}

scrollbar button,
scrollbar button.vertical,
scrollbar button.horizontal,
scrollbar .button,
scrollbar .button.vertical,
scrollbar .button.horizontal {
    color: shade(@theme_bg_color, 0.10);
    background-color: shade(@theme_bg_color, 0.6);
}

scrollbar.vertical slider,
scrollbar.vertical .slider {
    background-image: radial-gradient(ellipse at center, #dba13f 0%, #7c4e00 100%);
}

scrollbar.horizontal slider,
scrollbar.horizontal .slider {
    background-image: radial-gradient(ellipse at center, #dba13f 0%, #7c4e00 100%);