持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情
我将向您展示在每个浏览器中隐藏滚动条的过程。
删除滚动条的原因
- 隐藏滚动条还可以帮助您为页面上的其他内容节省空间——它可以在不同设备上提供更一致的用户体验，因为不同的系统可能不会以相同的方式呈现滚动条。
- 但是，隐藏滚动条的最常见原因是为了移动查看体验。在手机上查看 Facebook 等应用程序时，大多数用户希望滚动是垂直的，不需要水平移动，因为屏幕通常又高又窄。
隐藏滚动条
由于浏览器之间的根本差异，没有通用的方法可以用 CSS 隐藏滚动条。每个浏览器都有其方法，我们将在下面查看所有这些方法。
要在基于 WebKit 的浏览器中隐藏滚动条，您必须使用::-webkit-scrollbar伪选择器。::-webkit-scrollbar是 CSS 中的一个伪元素，开发人员用来修改浏览器滚动条的外观。
使用::-webkit-scrollbar伪选择器，您可以对滚动条做很多事情。您可以修改向上和向下的箭头、更改轨道的颜色、更改背景等等。但我们只会看看如何在不影响滚动的情况下隐藏滚动条。
您只需使用::-webkit-scrollbar伪选择器定位 body 元素并将显示设置为无。
body::-webkit-scrollbar {
display: none;
}
在 IE (Internet Explorer) 和 Edge 中
在 IE 和 Edge 中隐藏滚动条的语法与 Opera、Chrome 和 Safari 等基于 WebKit 的浏览器略有不同。在这里，我们必须使用该-ms-overflow-style属性。
与 不同::-webkit-scrollbar，您不能使用 来自-ms-overflow-style定义滚动条。要使用它来隐藏滚动条，您只需使用下面的代码。
如果您要定位特定元素或部分，请使用以下代码。
.element{
-ms-overflow-style: none;
}
如果您要定位整个页面，请使用此代码。
.body{
-ms-overflow-style: none;
}
在火狐中
要在 Firefox 中成功隐藏滚动条，您只需要使用该scrollbar-width:none属性来定位这样的部分。
.section {
scrollbar-width: none;
}
要在 Firefox 中定位整个页面的滚动条，在上面的两个部分中，我们将滚动条代码应用于body标签，并且它工作，但在 Firefox 中，我们必须改为定位html标签。
.html {
scrollbar-width: none;
}
或者，可以选择使用这种其他方法来隐藏 Firefox 中的滚动条。
.element{
overflow: -moz-scrollbars-none;
}
结论
如果你正在阅读本文，那么到现在为止，已经完全理解了在不影响滚动和可访问性的情况下使用 CSS 隐藏滚动条了。重要的是要注意，当定位具有可滚动内容的部分时，让滚动条作为视觉提示可见将有助于你的用户注意到该部分，而不是意外跳过它。
