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上与我联系。
鏂囩珷鏉ユ簮锛�https://dev.to/dailydevtips1/css-hide-scrollbars-2na0