前端自定义滚动条样式与显隐

浏览器自带的滚动条是不是太丑了一点？这还用说。。（谷歌、Safari和Edge支持，Firefox不支持，其他浏览器自行测试。。）

html

   <div class="content scrollbar">
      <p>内容1</p>
      <p>内容2</p>
      <p>内容3</p>
      <p>内容4</p>
      <p>内容5</p>
      <p>内容6</p>
      <p>内容7</p>
    </div>

css

.content{
    width: 200px;
    height: 150px;
    padding-left: 10px;
    border: 1px solid #ccc;
    overflow-y: hidden;
  }
  .content:hover{
    overflow-y: auto;
  } /* hover显示滚动条，否者不可滚动 且不显示 */
  .scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  .scrollbar::-webkit-scrollbar-track-piece {
    background-color: #fff;
  } /* 滚动条的内层滑轨背景颜色 */

  .scrollbar::-webkit-scrollbar-track {
    background-color: #fff;
  } /* 滚动条的外层滑轨背景颜色 */

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: #d4d8e2;
    border-radius: 6px;
  } /* 滚动条的内层滑块颜色，加圆角 */

  .scrollbar::-webkit-scrollbar-button {
    background-color: #fff;
    display: none;
  } /* 滑轨两头的监听按钮颜色 */

效果