美化网站自定义浏览器滚动条教程四款样式代码

n

CSS滚动条选择器

• • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
  • ::-webkit-scrollbar-track — 滚动条轨道.
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
  • ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
    

    将以下代码放至网站的css代码或主题style.css中即可。

    代码一纯蓝色当鼠标移到滚动条会变红色。

    /*—滚动条默认显示样式–*/
    ::-webkit-scrollbar-thumb{
    background-color:#018EE8;
    height:50px;
    outline-offset:-2px;
    outline:2px solid #fff;
    -webkit-border-radius:4px;
    border: 2px solid #fff;
    }
     
    /*—鼠标点击滚动条显示样式–*/
    ::-webkit-scrollbar-thumb:hover{
    background-color:#FB4446;
    height:50px;
    -webkit-border-radius:4px;
    }
     
    /*—滚动条大小–*/
    ::-webkit-scrollbar{
    width:8px;
    height:18px;
    }
     
    /*—滚动框背景样式–*/
    ::-webkit-scrollbar-track-piece{
    background-color:#fff;
    -webkit-border-radius:0;
    }

    代码二
    简约纯色细条

    ::-webkit-scrollbar {
      width: 9px;
      height: 9px
    }
    ::-webkit-scrollbar-track-piece {
      background-color: #ebebeb;
      -webkit-border-radius: 4px
    }
    ::-webkit-scrollbar-thumb:vertical {
      height: 32px;
      background-color: #ccc;
      -webkit-border-radius: 4px
    }
    ::-webkit-scrollbar-thumb:horizontal {
      width: 32px;
      background-color: #ccc;
      -webkit-border-radius: 4px
    }
    

    代码三
    红蓝相间的滚动条

    /**====滚动条样式====*/
    ::-webkit-scrollbar {/*滚动条整体样式*/
      width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      background-color: #12b7f5;
      background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
    }
    ::-webkit-scrollbar-thumb:hover {
    background-color: #ffab23;
    }
    ::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #f6f6f6;
    }

    代码四

    渐变彩色

    ::-webkit-scrollbar {
        width: 11px;
    }
    
    ::-webkit-scrollbar-thumb {
    	background-color: rgb(38, 48, 88);
    	background-image: -webkit-linear-gradient(45deg,#009688 25%,#368c84 25%,#8BC34A 50%,#9dd45d 50%,#FFEB3B 75%,#FFEB3B 75%,#FF9800);
        -webkit-border-radius: 5em;
        -moz-border-radius: 5em;
        border-radius: 5em;
    }
    
    ::-webkit-scrollbar-track {
         background-color: #fff;
        -webkit-border-radius: 5em;
        -moz-border-radius: 5em;
        border-radius: 5em;
        border: 1px solid #ccc;
    }
    

     

喜欢 (0)赏

[1528532472@qq.com]

分享 (0)