如何隐藏滚动条并使内容可滚动？ [复制]

Posted 2023-02-22

【中文标题】如何隐藏滚动条并使内容可滚动？ [复制]

【英文标题】：How to hide the scroll bar and with the content ramaining scrollable? [duplicate]

【发布时间】：2017-07-05 05:43:51

【问题描述】：

我想将我的 html 页面打印成 PDF 文件，但不想滚动条显示在 PDF 文件中。而且我的页面有一个可滚动的正文，所以如果我设置这个：

* 
   overflow: hidden;

最终的 pdf 文件中的正文将是不完整的。 那么是否有办法阻止滚动条显示但内容仍然可以滚动？

【参考方案1】：

有一个 CSS 规则可以在基于 Webkit 的浏览器（Chrome 和 Safari）中隐藏滚动条。这条规则是：

.element::-webkit-scrollbar  width: 0 !important 

在 IE 10+ 中有一个 CSS 规则可以隐藏滚动条。这条规则是：

.element  -ms-overflow-style: none; 

曾经有一个 CSS 规则可以在 Firefox 中隐藏滚动条，但它已经被弃用了。那条规则是：

.element  overflow: -moz-scrollbars-none; 

【参考方案2】：

您可以通过以下方式将滚动条的显示设置为无：

::-webkit-scrollbar 
    display: none;

这将隐藏所有滚动条而不禁用滚动。

编辑：这仅适用于 chrome，为了更好的解释，您可以查看此答案 Hidding Scrollbar

【讨论】：

这是完美的方式。不显示。