自定义滚动条样式 -webkit-scrollbar

webkit 定制滚动条

webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式。

  • ::-webkit-scrollbar 滚动条整体部分

  • ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)

  • ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb

  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。

  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)

  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处

  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

    /* 定义滚动条的宽度 */
    div::webkit-scrollbar {
    	width: 10px;
    }
    /* 定义滚动条的轨道 */
    div::webkit-scrollbar-track {
    	background-color: #ccc;
    }
    /* 定义滚动条的滑块 */
    div::webkit-scrollbar-thumb {
    	background-color: #2bd4d;
    }
    

新语法

  • scrollbar Width:定义滚动条的宽度,有两个值autothin。不能定义具体的数字。

    div {
    	scrollbar-width: thin;
    }
    
  • Scrollbar Color:定义滚动条trackthumb的颜色。

    div {
    	scrollbar-color: #6969dd #e0e0e0;
    }
    
posted @ 2021-06-10 18:05  黑色外套  阅读(90)  评论(0)    收藏  举报