You’ll also want to add…

* {
	scrollbar-color:unset !important;
	scrollbar-width:unset !important;
}

… to your #Firefox chrome/userContent.css (see http://web.archive.org/web/20200922175950/https://support.mozilla.org/en-US/questions/1291465#answer-1324670 or https://www.userchrome.org/firefox-changes-userchrome-css.html#fx69 first though) to make Twitter, StackOverflow, etc. use reasonable scrollbars.

With the update to Firefox-ESR 102, things get more vague again.

Setting layout.css.scrollbar-width-thin.disabled to true helps a little. You can play with widget.non-native-theme.scrollbar.style (integers from 0 to 5 or so), too, but they all look ugly. I found widget.non-native-theme.gtk.scrollbar.thumb-size=0.8 and widget.non-native-theme.gtk.scrollbar.round-thumb=false to help. You likely need to set widget.non-native-theme.gtk.scrollbar.allow-buttons to true and probably also widget.gtk.overlay-scrollbars.enabled to false.

I have changed so many settings around this I don’t know where I am with it right now. I also use a “dark maker” so the scrollbar needs some more contrast.

* {
	scrollbar-color:#303033 #C8C8CF !important;
	scrollbar-width:unset !important;
}

It seems like Firefox-ESR 102, unlike 91, almost completely ignores the GTK+3 theming of the scrollbar. (Yay, standards!) Meanwhile, its own codebase still lacks sufficient styling ability.