当前位置:网站首页 > 更多 > 站长帮 > 正文

[Web相关学习] 修改浏览器默认滚动条样式

作者:CC下载站 日期:2018-10-31 08:22:08 浏览:2053 分类:站长帮

效果欣赏

[Web相关学习] 修改浏览器默认滚动条样式

在根目录css文件下面加上css样式,诺,就酱紫↓

/*滚动条的宽高*/
::-webkit-scrollbar {
    width: 10px
}
 
/*滚动条父元素背景*/
::-webkit-scrollbar-track-piece {
    /*background-color:#fff;*/
    /*border:1px solid #ccc;*/
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
}
 
/*滚动条的自定义样式*/
::-webkit-scrollbar-thumb {
    background-color: #F10;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%,
    transparent 25%, transparent 50%,
    rgba(255, 255, 255, .4) 50%,
    rgba(255, 255, 255, .4) 75%,
    transparent 75%, transparent);
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
}
 
/*鼠标触摸后的样式*/
::-webkit-scrollbar-thumb:hover {
    background-color: #F90;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%,
    transparent 25%, transparent 50%,
    rgba(255, 255, 255, .4) 50%,
    rgba(255, 255, 255, .4) 75%,
    transparent 75%, transparent);
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
}


您需要 登录账户 后才能发表评论

取消回复欢迎 发表评论:

关灯