4

Some webpages, such as this FAQ or this blog post, do not display a vertical scrollbar even though the content overflows vertically. This makes it impossible to click-and-scroll, or to see how long the page is at a glance short of zooming all the way out (and sometimes even then).

Is there a way (browser config, add-on, Tampermonkey userscript, etc.) to force a website to display a scrollbar?

The linked website has no scrollbar in both Firefox and Chrome, but I’m on Firefox specifically, so any solutions that work for FF (and not just Chrome) are appreciated.

Destroy666
  • 12,350
Walter
  • 181

3 Answers3

2

There are many ways to disable scrollbars and you'd need to provide more examples than 1 website to cover all cases.

What Bluesky does is not related to overflow CSS. It actually just disables the scrollbars directly with styling, e.g. for Chrome it uses:

body ::-webkit-scrollbar, html ::-webkit-scrollbar {
  display: none;
}

-webkit-scrollbar is a pseudo-element that won't work on all browsers, including Firefox from your tags. Firefox actually uses:

body, html {
  scrollbar-width: none;
}

to remove it and that's even less compatible. Other browsers might provide different methods.

To reverse it in Firefox on the website itself, you can use:

document.documentElement.style.scrollbarWidth = "initial";

in a userscript or in console.

Crafting a universal anti scrollbar removal script might prove difficult and cause some issues due to edge cases. E.g. some quiz site could hide its answers by hiding scrollbar and you wouldn't want to enable it there then. There could also be some cases of some more JS-focused scroll blocking that might be harder to cover, but not sure they're your target.

So, to sum up, it's up to you to combine info from this and more overflow focused answer(s) and craft something that suits your needs accurately.

Destroy666
  • 12,350
2

One also might have to set Always show scrollbars in settings.

about:preferences#general -> Browsing -> [X] Always show scrollbars

On Linux (GTK) for distribution/policies.json or the like set:

widget.gtk.overlay-scrollbars.enabled to false.

Also found in about:config.

Have never understood this mania with hiding scrollbars as default.

user3342816
  • 283
0

Generally speaking, for a scrollbar to appear, the corresponding HTML element needs to have its overflow property set to scroll (or auto). You can also force a scrollbar using other techniques, but that is beyond this discussion.

In Firefox, you can use userContent.css to apply overflow: scroll to the appropriate HTML element. You can also install an extension such as Stylus and write a custom style to do the same.

If a site has CSS code that explicitly defines the overflow property of that element to prevent a scrollbar from appearing, make sure you append your CSS declaration with !important, like this:

element {
   overflow: scroll !important;
}

I'm greatly simplifying things for the context of this question, but this will handle most cases without overwhelming you with all the details of front-end programming!

Amazon Dies In Darkness
  • 9,990