谷歌浏览器:
//滚动条设置
.目标元素::-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;
}