主页 / computer / 问题 / 1808379
Accepted
Walter
Asked: 2023-09-14 19:44:16 +0800 CST

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

  • 772

某些网页，例如此常见问题解答或此博客文章，即使内容垂直溢出，也不会显示垂直滚动条。这使得无法单击并滚动，或者无法一目了然地看到页面有多长，无法完全缩小（有时甚至无法缩小）。

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

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

firefox

2 个回答

  1. Best Answer

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

    Bluesky所做的与 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针对性的答案中的信息，并准确地制作出适合您需求的内容。

    • 1

  2. 一般来说，要出现滚动条，相应的 HTML 元素需要将其overflow属性设置为scroll(或auto)。您还可以使用其他技术强制滚动条，但这超出了本次讨论的范围。

    在 Firefox 中，您可以使用userContent.css来应用overflow: scroll到适当的 HTML 元素。您还可以安装Stylus等扩展并编写自定义样式来执行相同的操作。

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

    element {
   overflow: scroll !important;
}

    我极大地简化了这个问题的上下文，但这将处理大多数情况，而不会让您对前端编程的所有细节感到不知所措！

    • 0

相关问题