4

css修改浏览器滚动条

 2 years ago
source link: https://blog.p2hp.com/archives/8169
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
css修改浏览器滚动条 | Lenix Blog
/*针对单个class*/
.scroll-nav::-webkit-scrollbar {
    width: 6px;/*竖滚动条的宽度*/
    height:6px;/*横向滚动条的高度*/
    background-color: transparent;
}

/*针对所有*/
::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}


/*如果页面有多个滚动条 ，下面的可共享*/
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background-color: #a8a8a8;
  
}
  1. /*针对单个class*/
  2. .scroll-nav::-webkit-scrollbar {
  3. width: 6px;/*竖滚动条的宽度*/
  4. height:6px;/*横向滚动条的高度*/
  5. background-color: transparent;
  6. /*针对所有*/
  7. ::-webkit-scrollbar {
  8. width: 6px;
  9. background-color: transparent;
  10. /*如果页面有多个滚动条 ，下面的可共享*/
  11. ::-webkit-scrollbar-track {
  12. background: #f1f1f1;
  13. ::-webkit-scrollbar-thumb {
  14. background-color: #a8a8a8;
/*针对单个class*/
.scroll-nav::-webkit-scrollbar {
    width: 6px;/*竖滚动条的宽度*/
    height:6px;/*横向滚动条的高度*/
    background-color: transparent;
}

/*针对所有*/
::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}


/*如果页面有多个滚动条 ，下面的可共享*/
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background-color: #a8a8a8;
  
}

本代码只对chrome系列浏览器生效。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK