【CSS】CSS隐藏元素滚动条

最近在用vuejs+element-ui搭建一个后台管理系统，UI布局定的是左侧导航栏和顶部导航栏相结合。

左侧导航栏css：

.side-bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  overflow-y: hidden;
}

结果由于模块太多， 左侧导航栏高度超过了屏幕高度，之前overflow-y设置成了hidden,就导致了超出屏幕高度的部分无法显示.

解决办法是将overflow-y设为auto, 这样的话， 如果左侧导航栏的高度超过了屏幕高度， 则在导航栏右侧显示一个滚动条。

功能上满足了， 但是这个滚动条也太丑了点吧 💔

一番google之后， 找到了解决方案：

添加下面的css代码， 既可以隐藏.side-bar的滚动条，又不影响滚动效果， 完美解决 👍️

.side-bar::-webkit-scrollbar{
  display: none;
}

不过据说是只有在webkit内核的浏览器内有效，非webkit内核浏览器未测试。