C

CSS隐藏滚动条

2025-06-08

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 */
}
Enter fullscreen mode Exit fullscreen mode

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

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

感谢您的阅读,让我们联系起来!

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

鏂囩珷鏉ユ簮锛�https://dev.to/dailydevtips1/css-hide-scrollbars-2na0
PREV
CSS 霓虹灯动画
NEXT
创建仅使用 CSS 的昼夜切换开关