zoukankan      html  css  js  c++  java
  • 不用装扩展也可自定义 Chrome 滚动条的样式

    不用装扩展也可自定义 Chrome 滚动条的样式

    有不少可以帮你修改Chrome默认滚动条样式的扩展,Scroll Bar X就是其中的佼佼者,但是这个扩展在安装的时候提示说会存取所有的网站数据,这就让人感觉很难以接受了。其实咱们可以自己动手,丰衣足食。首先在自己的系统里找到如下这个.css文件:

    Windows:
    %LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

    Mac:
    /Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

    Ubuntu:
    ~/.config/chromium/Default/User\ StyleSheets/Custom.css

    用任何一款文字编辑器打开之,加入以下代码:

    ::-webkit-scrollbar-track-piece{
    background-color:#fff;
    -webkit-border-radius:0;
    }
    ::-webkit-scrollbar{
    8px;
    height:8px;
    }
    ::-webkit-scrollbar-thumb{
    height:50px;
    background-color:#999;
    -webkit-border-radius:4px;
    outline:2px solid #fff;
    outline-offset:-2px;
    border: 2px solid #fff;
    }
    ::-webkit-scrollbar-thumb:hover{
    height:50px;
    background-color:#9f9f9f;
    -webkit-border-radius:4px;
    }

    保存之后重新打开你的Chrome浏览器,看到变化了吧?其实这些都是基础的CSS代码,所以你可以随心所欲的定制。比如你觉得滚动条太细了,即可编辑以下这段代码里的宽度:

    ::-webkit-scrollbar{
    16px;
    }

    另外,其实Chrome的Web Inspector也是可以通过修改CSS来定制页面风格的,其CSS文件地址:

    Windows:
    %LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

    Mac:
    /Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

    Ubuntu:
    ~/.config/chromium/Default/User\ StyleSheets/Custom.css

    长微博 - 长微博工具

  • 相关阅读:
    兼容python3 小烦
    fstring 和 海象赋值
    Go-gRPC的简单使用
    GO-操作etcd简单示例
    进度报告
    进度报告
    windown 10 安装redis
    在.Net Core中使用T4工具生成实体文件
    python-with关键字,json,pickie序列化与反序列化
    python-文件操作-读,写,追加
  • 原文地址:https://www.cnblogs.com/ansin/p/2317584.html
Copyright © 2011-2022 走看看