CSS隐藏滚动条

今天我们将用 CSS 隐藏滚动条！
虽然我很喜欢浏览器原生的行为，但在某些情况下，我们还是需要隐藏滚动条。

在 Mac 上工作时，你几乎看不到滚动条有多难看，但切换到 Windows 你会发现侧面菜单的滚动条非常难看。

如您所见，内容的右侧滚动条很好，这是正常行为，但修复侧面菜单的滚动条有点错位，看起来不太好看。

在 Mac 上，它不会造成干扰，因为它会消失，但对于 Windows 用户来说它始终可见，这对我们的设计没有好处。

删除侧边栏

幸运的是，我们可以用一些CSS魔法删除这个侧边栏，而不会失去它的功能。

注意：请明智地使用它，因为这是向用户显示可滚动区域的默认方式。

在我们的例子中，我们将在no-scroll想要删除滚动的元素上添加一个类。

.no-scroll {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.no-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

如您所见，我们针对 IE 和 Firefox 设定了特定的目标。较新的浏览器使用伪选择器，我们可以将其设置为不显示。

您可以在此 Codepen 中查看结果。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。