略微加速

略速 - 互联网笔记

如何自定义浏览器滚动条样式(Webkit内核)

2016-09-08 leiting (3368阅读)

标签 HTML/CSS/XML

::-webkit-scrollbar{/* 1 */} /*滚动条垂直方向的宽度与水平方向的高度*/ 

::-webkit-scrollbar-button{/* 2 */} /*滚动条按钮*/ 

::-webkit-scrollbar-track{/* 3 */} /*滚动条轨道*/ 

::-webkit-scrollbar-track-piece{/* 4 */} /*滚动条垂直方向轨道件*/ 

::-webkit-scrollbar-thumb{/* 5 */} /*滚动条轨道上的按钮*/ 

::-webkit-scrollbar-corner{/* 6 */} /*滚动条轨道上的滚动角*/ 

::-webkit-resizer{/* 7 */}/**/

adee30dda3cc7cd951d27afb3d01213fb90e91d2.jpg

:horizontal//横向滚动条

:vertical//垂直滚动条

:window-inactive //窗口未激活状态

...其它


举例:

::-webkit-scrollbar {

   width: 0.2em;

}


::-webkit-scrollbar:horizontal //横向滚动条样式

{

   height: 0.2em;

}


/* Track */

::-webkit-scrollbar-track {

   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 

   -webkit-border-radius: 10px;

   border-radius: 10px;

}


/* Handle */

::-webkit-scrollbar-thumb {

   -webkit-border-radius: 10px;

   border-radius: 10px;

  background: rgba(255,0,0,0.8); 

   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(169,169,169,0.4); 

}

最终效果

2f9cbdcc7cd98d10da5f4413253fb80e7aec90ce.jpg

北京半月雨文化科技有限公司.版权所有 京ICP备12026184号-3