这对我来说适用于简单的CSS财产：

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

对于旧版本的Firefox，请使用：overflow:-moz滚动条none；

WebKit支持可以使用标准CSS规则隐藏的滚动条伪元素：

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

如果要隐藏所有滚动条，请使用

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

我不确定是否要恢复-这确实有效，但可能有一种正确的方法：

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

当然，您可以始终使用width:0，然后可以使用width:auto轻松恢复，但我不喜欢滥用width来调整可见性。

Firefox 64现在默认支持实验性的滚动条宽度属性（63需要设置配置标志）。要在Firefox 64中隐藏滚动条：

#element {
    scrollbar-width: none;
}

要查看当前浏览器是否支持伪元素或滚动条宽度，请尝试以下代码段：

.内容{/*这些规则创造了一个人工封闭的空间我们可以隐藏的滚动条。他们不直接参与隐藏滚动条*/边框：1px灰色虚线；衬垫：.5cm；空白：预换行；高度：5米；overflow-y：滚动；}.内容{/*这是Firefox的神奇之处*/滚动条宽度：无；}.content:：-webkit滚动条{/*这是WebKit的神奇之处*/显示：无；}<div class='content'>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Mauris欧盟urna和leo aliquet malesuada ut ac dolor。融合非弧形舌费门特姆索达莱斯是一位智者。安静地坐在委内瑞拉埃格斯塔斯。整数vite tempor enim。在达皮布斯尼塞尔坐amet purus conguetincidunt。Morbi tincidunt ut eros in rutrum。Sed quam erat，福西布斯水平tempor et，元素在tortor。弧形立面的实际自由度莫莉-乌特-智人。苏西庇特厄洛斯，欧盟泰勒斯facilisis a.Vivamus vulputate enim felis，一种直径为euismod的元素不。Duis efficiuit ac elit non-placerat。整数porta-viverra nunc，sed semper ipsum。越南自由贸易区。坐在猫的旁边。Sed impredite，nunc ut portal elementum，厄洛斯·米·埃格斯塔斯·尼布，法利西斯·鲁特鲁姆·萨皮恩·多尔·居斯托。Quisque公司nec magna erat公司。交通工具相（Phasellus vehicula porttitor nulla et dictum）。轿车tincidunt scelersque finibus。麦地那斯（Maecenas consequat massa aliquam pretium）volutpat。Duis elementum magna vel velit elementum，ut scelerisque奥迪奥·福西布斯。</div>

（请注意，这并不是这个问题的正确答案，因为它也隐藏了水平条，但当谷歌将我指向这里时，我正在寻找这一点，所以我想无论如何我都会发布它。）

使用CSS溢出属性：

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

以下是更多示例：

溢出-x，溢出-y测试CSS溢出属性

要禁用垂直滚动条，只需添加overflow-y:hidden；。

了解更多信息：溢出。

隐藏滚动条的跨浏览器方法。

它在Edge、Chrome、Firefox和Safari上进行了测试

隐藏滚动条，同时仍然可以使用鼠标滚轮滚动！

代码笔

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

我的HTML是这样的：

<div class="container">
  <div class="content">
  </div>
</div>

将其添加到要隐藏滚动条的div中：

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

并将其添加到容器中

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}