现在的位置: 首页 > 综合 > 正文

webkit内核的滚动条样式

2018年02月03日 ⁄ 综合 ⁄ 共 908字 ⁄ 字号 评论关闭

  项目当中用到的滚动条样式,在别人的基础上调成适合自己的样式。(IE可以调试滚动条样式,firefox目前不能调试)

   

  ::-webkit-scrollbar { width: 14px; }/* Track & scroll thickness */

  ::-webkit-scrollbar-track { background-color:#ddd; }/* Track color */

  ::-webkit-scrollbar-thumb { background-color: #333;}/* Scroll color */

  ::-webkit-scrollbar-thumb:hover { background-color: #000 }/* Scroll hover color */

  ::-webkit-scrollbar-thumb:active { background-color: #000 }/* Scroll click & drag color */

分享一下 我的项目中的webkit内核滚动条样式(chrome,sarfrai)

  ::-webkit-scrollbar {
      width: 10px;
   }

  /* 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(231,231,231,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
 ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(231,231,231,0.4);
   }

                                                                            

抱歉!评论已关闭.