滚动条样式修改

Posted 2020-12-20 97pkp

1.谷歌浏览器（WebKit内核）：

//滚动条设置
.element::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
//滚动槽设置
.element::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(2,11,45,0.5);
  border: none;
}
//横向纵向滚动条交汇处设置
.element::-webkit-scrollbar-corner {
  background: transparent;
}
//拖动滑块设置
.element::-webkit-scrollbar-thumb {
  background: rgba(53,127,191,0.8);
  border-radius: 10px;
}
//滑块悬浮设置
.element::-webkit-scrollbar-thumb:hover {
  background: rgba(53,127,191,1);
}

展示：

 

 

2.火狐：

写在overflow-y同级的位置，将滚动条置为透明，以此规避丑丑的滚动条样式。

.element {
  overflow-y: auto;
  scrollbar-color: transparent transparent;  
}

3.IE:

写在overflow-y同级的位置，由于在ie下transparent无效，故将滚动条置为页面背景色，以此规避丑丑的滚动条样式。

.element {
    overflow-y: auto;
    scrollbar-arrow-color: #f0f2f5;  /* 设置滚动条上的箭头颜色  */
    scrollbar-base-color: #f0f2f5;  /* 设置滚动条的底色 */
    scrollbar-track-color: #f0f2f5;  /* 设置滚动条块的背景色 */
    scrollbar-shadow-color: #f0f2f5;  /* 设置箭头和滚动条右侧和底边的颜色 */
}

tip: 因为火狐和IE没做兼容，所以后两种没有用到，因此没有实测过