web 页面滚动条的显示与美化（只考虑Chrome）

web 页面滚动条的显示与美化（只考虑Chrome）

背景: 想实现当鼠标悬浮至内容区时，显示滚动条，移出则不显示。

样式大致如下(Sass)：

$scrollbarWidth: 8px;
$scrollbarHeight: 8px;

.discrible {
  overflow: scroll;
  -ms-overflow-style: none;
  /** //IE 10+*/
  overflow: -moz-scrollbars-none;
  /** Firefox */
}

/*整个滚动条样式 当0;或display:none;时，滚动条不显示*/
/* .discrible      ::-webkit-scrollbar {
  display: none;
} */

/*整个滚动条样式*/
.discrible::-webkit-scrollbar {
   $scrollbarWidth - 1px;
  height: $scrollbarWidth;
  background: transparent;
}

/*设置滚动条上的滚动滑块样式*/
.discrible::-webkit-scrollbar-thumb {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*鼠标位于内容上时，滚动条样式*/
.discrible:hover::-webkit-scrollbar {
   $scrollbarWidth - 1px;
  height: $scrollbarWidth;
  background: transparent;
  border-radius: 6px;
}

/*鼠标位于内容上时，滚动滑块样式*/
.discrible:hover::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  -webkit-box-shadow: inset 0 0 ($scrollbarWidth - 1px) rgba(193, 193, 193, 0.3);
  box-shadow: none;
  border-radius: 10px;
}

参考：https://blog.csdn.net/sunny123x/article/details/84800888