zoukankan      html  css  js  c++  java
  • webkit内核浏览器自定义滚动条样式代码

    webkit(开源)内核浏览器包括 chrome 、safari、iPhone/Android上默认的浏览器也是基于webkit的,因为webkit是开源的,所以国内也有基于webkit内核的浏览器,例如:360极速、遨游3、搜狗极速等。

    另外还有浏览器内核还有Trident(IE内核)、Gecko(firefox内核)、Presto(Opera内核)

    Demo

    下面是代码:

     1 html {
     2 overflow: auto;
     3 }
     4 body {
     5 position: absolute;
     6 top: 0;
     7 left: 0;
     8 bottom: 0;
     9 right: 0;
    10 overflow-y: scroll;
    11 overflow-x: hidden;
    12 }
    13 
    14 /*滚动条宽度*/
    15 ::-webkit-scrollbar {
    16 width: 8px;
    17 }
    18 
    19 /* 轨道样式 */
    20 ::-webkit-scrollbar-track {
    21 
    22 }
    23 
    24 /* Handle样式 */
    25 ::-webkit-scrollbar-thumb {
    26 border-radius: 10px;
    27 background: rgba(0,0,0,0.2);
    28 }
    29 
    30 /*当前窗口未激活的情况下*/
    31 ::-webkit-scrollbar-thumb:window-inactive {
    32 background: rgba(0,0,0,0.1);
    33 }
    34 
    35 /*hover到滚动条上*/
    36 ::-webkit-scrollbar-thumb:vertical:hover{
    37 background-color: rgba(0,0,0,0.3);
    38 }
    39 /*滚动条按下*/
    40 ::-webkit-scrollbar-thumb:vertical:active{
    41 background-color: rgba(0,0,0,0.7);
    42 }
  • 相关阅读:
    lnmp分离及其迁移数之一---数据库迁移
    lnmp wordpress...
    LNMP安装
    rpm 强制卸载
    ss ifconfig工具
    nginx--日志
    nginx--模块2--基于用户
    python-网络编程
    基本数据之-字典
    Python【day 9】函数入门1
  • 原文地址:https://www.cnblogs.com/jmjweb/p/3180207.html
Copyright © 2011-2022 走看看