css设置滚动条样式

先看效果图

css设置滚动条样式_第1张图片

附上效果图代码:

1.style部分


2.body部分
11111111

11111111111111111111

11111111111111111111

11111111111111111111

11111111111111111111

11111111111111111111

11111111111111111111

11111111111111111111

11111111111111111111

11111111111111111111

11111111111111111111

最后,总结 一个滚动条的组成部分(通常设置前三个即可):

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块(即滚动条滑块),能向上向下移动(或横向滚动条可往左往右移动)
  • ::-webkit-scrollbar-track  滚动条的轨道(对应上图滚动条凹槽,里面装有Thumb,即滚动条滑块)
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置
  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

你可能感兴趣的:(css)