如何隐藏滚动条并使内容仍然可滚动？

12 浏览
0 Comments

如何隐藏滚动条并使内容仍然可滚动？

这个问题已经有答案了：

隐藏滚动条，但仍然能够滚动

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

* {
   overflow: hidden;
}

最终的PDF文件会出现不完整的内容。

所以，有没有办法仅仅阻止滚动条的显示而内容仍然可以滚动呢？

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

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

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

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

.element { -ms-overflow-style: none; }

以前有一条可以隐藏Firefox中滚动条的CSS规则，但现在已经被弃用。该规则是：

.element { overflow: -moz-scrollbars-none; }

0
0 Comments

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

::-webkit-scrollbar {
    display: none;
}

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

编辑：这只在Chrome浏览器上有效，如果您想更好地了解，请查看此答案Hidding Scrollbar

0