Deprecated: Optional parameter $keys declared before required parameter $cms_id is implicitly treated as a required parameter in /home/www/dev/work/class/blog/CmsKey.php on line 75

Deprecated: Creation of dynamic property lvesu\lvesu\controller\blog\main::$outlink is deprecated in /home/www/dev/work/website/lvesu/template/blog/cms/cms.tpl on line 2

Deprecated: Creation of dynamic property lvesu\lvesu\controller\blog\main::$status is deprecated in /home/www/dev/work/website/lvesu/template/blog/index.head.php on line 2
如何自定义浏览器滚动条样式(Webkit内核) - 互联网笔记

略微加速

略速 - 互联网笔记

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

2016-09-08 leiting (3801阅读)

标签 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