☰

如何防止网站隐藏其滚动条？

tag-icon • tag-icon firefox browser userscripts scrollbar
如何防止网站隐藏其滚动条？

一些网页，例如此常见问题解答或者这篇博文，即使内容在垂直方向上溢出，也不会显示垂直滚动条。这样就无法点击并滚动，或者无法一眼看出页面有多长，除非完全缩小页面（有时甚至缩小页面也是如此）。

有没有办法（浏览器配置、附加组件、Tampermonkey 用户脚本等）可以强制网站显示滚动条？

链接的网站在 Firefox 和 Chrome 中都没有滚动条，但我专门使用 Firefox，因此任何适用于 FF（而不仅仅是 Chrome）的解决方案都值得赞赏。

答案1

禁用滚动条的方法有很多种，您需要提供超过 1 个网站的示例来涵盖所有情况。

什么蓝天所做的与 CSS 无关overflow。它实际上只是直接使用样式禁用滚动条，例如对于 Chrome，它使用：

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

-webkit-scrollbar是一个伪元素不起作用在所有浏览器上，包括 Firefox，都使用标签。Firefox 实际上使用：

body, html {
  scrollbar-width: none;
}

将其移除即可兼容性更差。其他浏览器可能提供不同的方法。

要在 Firefox 网站上进行还原，您可以使用：

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

在用户脚本或控制台中。

编写通用的防滚动条移除脚本可能会很困难，并且会因为极端情况而导致一些问题。例如，一些测验网站可以通过隐藏滚动条来隐藏答案，而您不会想在那里启用它。还可能存在一些更侧重于 JS 的滚动阻止情况，这些情况可能更难覆盖，但不确定它们是否是您的目标。

因此，总而言之，您需要结合此处的信息以及更有overflow针对性的答案，制作出准确适合您需求的内容。

答案2

一般来说，要显示滚动条，相应的 HTML 元素需要将其overflow属性设置为scroll（或auto）。您也可以使用其他技术强制显示滚动条，但这超出了本文的讨论范围。

在 Firefox 中，您可以使用userContent.css应用于overflow: scroll相应的 HTML 元素。您还可以安装扩展，例如触控笔并编写自定义样式来执行相同操作。

如果站点的 CSS 代码明确定义了overflow该元素的属性以防止出现滚动条，请确保在 CSS 声明后附加!important，如下所示：

element {
   overflow: scroll !important;
}

我针对这个问题的背景大大简化了事情，但这可以处理大多数情况，而不会让你被前端编程的所有细节所困扰！

答案3

可能还需要设置始终显示滚动条在设置中。

about:preferences#general->浏览-> [X] 始终显示滚动条

在 Linux (GTK) 上distribution/policies.json或类似的设置：

widget.gtk.overlay-scrollbars.enabled到false。

也发现于about:config。

从来没有理解过这种默认隐藏滚动条的狂热。

相关内容