CSS自定义滚动条

样板html结构

一个类名为parent的容器包裹了一些lorem。

    

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, delectus
      libero cupiditate sapiente excepturi, ea hic, exercitationem quisquam ad
      dolor asperiores quibusdam ut natus mollitia velit voluptate. Alias,
      corporis numquam!Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Iusto, delectus libero cupiditate sapiente excepturi, ea hic,
      exercitationem quisquam ad dolor asperiores quibusdam ut natus mollitia
      velit voluptate. Alias, corporis numquam!
    
  

如何实现滚动条？

在容器元素中一定要有给定的高度和overflow属性：

.parent {
	height: 300px;
	overflow-y: scroll;		// 如果是水平方向则为overflow-x: scroll，同时给定宽度。
}

Chrome中隐藏滚动条

伪类-webkit-scrollbar表示webkit中滚动条的轨道，将其宽度定义为0，背景定义为transparent即可隐藏滚动条。

::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }

Chrome中自定义滚动条样式

-webkit-scrollbar用于改变滚动条轨道样式，这里修改了宽度和颜色。
-webkit-scrollbar-thumb用于改变滚动条按钮样式，这里修改了background-color，border-radius，opacity和box-shadow。
-webkit-scrollbar-thumb:hover: 滚动条按钮拖动，拖动对应用hover事件，这里修改了颜色。

::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }
::-webkit-scrollbar-thumb {
      background-color: #00cc00;
      opacity: 0.5;
      border-radius: 5px;
      box-shadow: 0 0 1px 1px #ccc;
    }
::-webkit-scrollbar-thumb:hover {
      background: #888;
    }

Mozilla中修改滚动条样式

新版的Mozilla中规定了 scrollbar-color和scrollbar-width属性，直接在容器中使用。
scrollbar-color有auto，dark，light或自定义选项。
scrollbar-width有auto，thin，none选项。

.parent {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}

参考：

scrollbar-width： https://developer.mozilla.org/zh-CN/docs/Web/CSS/scrollbar-width
scrollbar-color：https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
scrollbar：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars