CSS

CSS美化滚动条

scrollbar美化方法

Posted by Ayi on December 13, 2018

滚动条构造图

构造说明

  1. ::-webkit-scrollbar: 滚动条的整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
  2. ::-webkit-scrollbar-button: 滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变现实效果。
  3. ::-webkit-scrollbar-track : 外层轨道,可以用display:none让其不显示,也可以添加背景图片,颜色改变现实效果
  4. ::-webkit-scrollbar-track-piece: 内层轨道,滚动条中间的部分(除去可以拖动的那部分)
  5. ::-webkit-scrollbar-track-piece: 滚动条里面可以拖动的部分
  6. ::-webkit-scrollbar-corner: 边角
  7. ::-webkit-resizer: 定义右下角拖动块的样式

用法

<div class="demo"></div>

<script>
demo::-webkit-scrollbar {
	width: 10px;
    height:9px;
}
</script>

其他属性同理

鸣谢

总结整理出自谦龙的小天地的博客微达夫的简书