滚动条样式修改

166 阅读1分钟
谷歌浏览器:
//滚动条设置
.目标元素::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
//滚动槽设置
.目标元素::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #009970;
    border: none;
}
//横向纵向滚动条交汇处设置
.目标元素::-webkit-scrollbar-corner {
    background: transparent;
}
//拖动滑块设置
.目标元素::-webkit-scrollbar-thumb {
    background: #80cc64;
    border-radius: 10px;
}
//滑块悬浮设置
.目标元素::-webkit-scrollbar-thumb:hover {
    background: rgba(53,127,191,1);
}

火狐:写在`overflow-y`同级的位置,将滚动条置为透明
    .目标元素 {
      overflow-y: auto;
      scrollbar-color: transparent transparent;  
    }

IE:写在`overflow-y`同级的位置,由于在ie下`transparent`无效,故将滚动条置为页面背景色
    .目标元素 {
        overflow-y: auto;
        scrollbar-arrow-color: #f0f2f5;  /* 设置滚动条上的箭头颜色  */
        scrollbar-base-color: #f0f2f5;  /* 设置滚动条的底色 */
        scrollbar-track-color: #f0f2f5;  /* 设置滚动条块的背景色 */
        scrollbar-shadow-color: #f0f2f5;  /* 设置箭头和滚动条右侧和底边的颜色 */
    }