调整浏览器滚动条样式

我们知道浏览器自带滚动条很丑，有时影响整个页面到美观，尤其在页面内嵌一个滚动列表，显得奇丑无比，下面我们根据如下代码调节滚动条样式。

::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.2);
  height: 50px;
  outline-offset: 0;
  outline: 1px solid rgba(255,255,255,0.2);
  -webkit-border-radius: 8px;
  border: 1px solid  rgba(255,255,255,0);
}
/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
  height: 50px;
  -webkit-border-radius: 8px;
}
/*---滚动条大小--*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  -webkit-border-radius: 8px;
}
/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece {
  background-color: rgba(255,255,255,0.1);
  -webkit-border-radius: 8px;
}
/*---x轴滚动条和y轴滚动条交汇的地方---*/
::-webkit-scrollbar-corner {
  background-color: transparent;
}

效果图：

从效果图中看出，滚动条宽度细了，颜色好看了。到这里基本上完成了滚动条的样式调整，但是呢，这样设置会有一个问题，如果父节点overflow设置auto，内容没有高于父节点高度，从滚动条会一直显示出来，不能自动隐藏。如何解决这个问题呢？

我们可以设置鼠标划过(:hover)父节点时，设置overflow为auto，离开父节点时overflow为hidden，这样就可以实现滚动条自动隐藏。