如何隐藏CSS中的滚动条

准确地设计一个网站，您想要如何削减删除多余的空间 - 一些空格，那里的下划线，或者，在今天的情况下，滚动条。

无论是设计还是功能原因，它都很容易隐藏页面上的滚动条或使用一点CSS。有多种方法来实现这一方法 - 隐藏滚动条，同时允许滚动，在禁用滚动时隐藏它，并只保持滚动条仅在需要之前隐藏 - 其中一些将基于您的情况更好地工作。

为满足您的设计需求，本指南将涵盖所有这些方法。让我们开始吧。

如何隐藏CSS中的滚动条（但允许滚动）

唉，没有专门的CSS规则来隐藏滚动条，同时保持向下滚动页面/元素的能力。然而，通过一些特定于浏览器的CSS规则，这是可能的。要隐藏滚动条并保持滚动功能，请将以下CSS应用于正文(用于整个页面)或特定元素。

/*隐藏滚动条但允许滚动*/
元素 {
- 溢出风格：无;/ *对于Internet Explorer，Edge * /
滚动条 - 宽度：无;/ * for firefox * /
overflow-y:滚动;
}

元素::  -  webkit-scrollbar {
显示：无;/ *用于Chrome，Safari和Opera * /
}

...在哪里元素是您想要的选择器。这是应用于整个页面时的代码如下所示：

看笔在CSS中隐藏滚动条，但允许滚动(正文)由克里斯蒂娜百科（@hubspot.） 上Codepen.。

这里是应用于相同的代码< div >元素：

看笔在CSS中隐藏滚动条，但允许滚动(div)由克里斯蒂娜百科（@hubspot.） 上Codepen.。

通常，滚动条将出现在这两个情况下，但我们的规则会阻止这种情况发生在流行的Web浏览器上。

如何隐藏CSS中的滚动条（并阻止滚动）

要隐藏滚动条并禁用滚动，我们可以使用CSS溢出属性。此属性确定与扩展超出其容器边界的内容有关。

要防止使用此属性滚动，只需应用规则溢出：隐藏到身体（对于整个页面）或容器元素。这隐藏了元素边界之外的所有内容。或者，使用可见溢出:显示延伸超出容器边框的内容。

看笔隐藏滚动条在CSS和防止滚动(溢出:隐藏)由克里斯蒂娜百科（@hubspot.） 上Codepen.。

这禁用垂直和水平滚动。正如我们接下来的那样，您还可以仅禁用水平滚动或仅垂直滚动。

如何隐藏CSS中的垂直滚动条

隐藏垂直滚动条并防止垂直滚动，使用overflow-y:隐藏喜欢：

看笔隐藏CSS中的滚动条并防止滚动（溢出-Y：隐藏）由克里斯蒂娜百科（@hubspot.） 上Codepen.。

如何隐藏CSS中的水平滚动条

自水平滚动通常是一个坏主意，这个规则可以派上用场。要隐藏水平滚动条并防止水平滚动，请使用overflow-x：隐藏：

看笔在CSS中隐藏滚动条，防止滚动(overflow-x: hidden)由克里斯蒂娜百科（@hubspot.） 上Codepen.。

如何隐藏滚动条，直到需要

隐藏滚动条在某些情况下可能有助于您的设计。但在其他情况下，删除页面的这一部分实际上会损害用户体验。

大多数访问者将滚动的活动与可见滚动条关联。因此，如果将此方法应用于整个页面，那么某些可能似乎很奇怪。此外，Scrollbars告诉我们，我们留下了多少页面查看（除非实现了无限滚动）。除非您有一些其他视觉指示器，除了有更多的内容左侧看，否则缺少滚动条可能会被拒收。

用户测试可以阐明丢失的滚动条如何影响您的网站的用户体验，但在许多情况下，良好的妥协是隐藏滚动条，直到用户发起滚动。要在CSS中启用此功能，请使用溢出:汽车规则。

看笔隐藏滚动条直到需要由克里斯蒂娜百科（@hubspot.） 上Codepen.。

隐藏带有CSS的滚动条

无论您是用纯CSS或框架构建页面，引导，它只需要几个规则来隐藏滚动条从您的页面。

然而，要记住，你能做到并不意味着你应该做到。对于许多用户来说，滚动条是一个方便的可视化提示，支持导航。如果您打算删除它，请确保有意地这样做，并且以一种有助于您的设计的方式。