CSS修改滚动条样式(Firefox, Chrome, Safari)

全局滚动条修改

• Chrome, Safari 等基于 webkit 内核的浏览器

Shell

::-webkit-scrollbar { /*竖滚动条宽度*/ width: 12px !important; /*横滚动条高度*/ height: 12px !important; } /*滚动条*/ ::-webkit-scrollbar-thumb { border-radius: 6px !important; background-color: #171514 !important; box-shadow: 4px 2px 12px #fff !important; } /*滚动条的轨道背景色*/ ::-webkit-scrollbar-track { background-color: rgb(68, 68, 68) !important; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

::-webkit-scrollbar {     /*竖滚动条宽度*/     width: 12px !important;     /*横滚动条高度*/     height: 12px !important; }   /*滚动条*/ ::-webkit-scrollbar-thumb {     border-radius: 6px !important;     background-color: #171514 !important;     box-shadow: 4px 2px 12px #fff !important; }   /*滚动条的轨道背景色*/ ::-webkit-scrollbar-track {     background-color: rgb(68, 68, 68) !important; }

• Firefox浏览器（目前仅支持下面两个参数修改）

Shell

* { /*两个参数 第一个：滑块背景色，第二个：轨道背景色*/ scrollbar-color: #171514 rgb(68, 68, 68); /*滚动条宽度*/ scrollbar-width: thin; }

1 2 3 4 5 6 7

* {    /*两个参数 第一个：滑块背景色，第二个：轨道背景色*/    scrollbar-color: #171514 rgb(68, 68, 68);    /*滚动条宽度*/    scrollbar-width: thin; }

• IE浏览器

Shell

* { scrolLbar-arrow-color: red; scrollbar-face-color:#333； scrollbar-3dlight-color: #666; scrollbar-highlight-color: #666; scrollbar-shadow-color: #999; scrolLbar-darkshadow-color: #666; scrollbar-track-color: #666: scrollbar-base-color:#f8f8f8； }

1 2 3 4 5 6 7 8 9 10 11

* {    scrolLbar-arrow-color: red;    scrollbar-face-color:#333；    scrollbar-3dlight-color: #666;    scrollbar-highlight-color: #666;    scrollbar-shadow-color: #999;    scrolLbar-darkshadow-color: #666;    scrollbar-track-color: #666:    scrollbar-base-color:#f8f8f8； }

针对某个元素的滚动条隐藏

• Firefox浏览器

Shell

#textarea { scrollbar-width: none !important; }

1 2 3 4

#textarea {     scrollbar-width: none !important; }

• Chrome和Safari浏览器

Shell

#textarea::-webkit-scrollbar { /*Chrome, Safari*/ display: none !important; }

1 2 3 4 5

#textarea::-webkit-scrollbar {     /*Chrome, Safari*/     display: none !important; }

• IE浏览器

Shell

#textarea { -ms-overflow-style: none !important; }

1 2 3 4

#textarea {     -ms-overflow-style: none !important; }