谷歌滚动条样式(滚动条样式按钮)

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

大家好,又见面了,我是你们的朋友全栈君。

谷歌滚动条样式(滚动条样式按钮)

有不少可以帮你修改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{
	width: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{
	width: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

Via GTricks

转载自:谷奥

转载于:https://www.cnblogs.com/cmleung/archive/2011/09/01/2161545.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/126888.html原文链接:https://javaforall.net

(0)
上一篇 2022年4月17日 下午12:20
下一篇 2022年4月17日 下午12:20


相关推荐

  • html如何打印_html打印代码

    html如何打印_html打印代码利用JS技术实现打印HTML表格 通常在浏览网页的时候,网页上总是出现一些和内容无关的内容,在打印的时候,要是把整个网页都打印下来,总会有些不方便。。。所以在有需要打印的网页上稍微设置一下打印页是很有必要的。。。 首先在head里面加入下面一段js代码:———————————————functionprev

    2022年8月11日
    46
  • 集合类型python_集合 python

    集合类型python_集合 python集合集合的特点:是一种可迭代的、无序的、不能包含重复元素的数据结构去重b=[10,5,6,1,9,1]c=set(b)print(c)>>>{1,5

    2022年7月28日
    8
  • c绝对值函数图像_取绝对值(C、C++、js)

    c绝对值函数图像_取绝对值(C、C++、js)在计算过程中 如果要确保返回正整 一般都要使用绝对值 编程语言通常都会提供取绝对值方法 下面分别看看 C C js 如何取绝对值 一 C 取绝对值 1 方法 Math Ads intvalue 2 说明 除支持整型外 还支持 float double decimal sbyte short long 3 命名空间 System4 举例 Math Abs 5 8 输出 3Math

    2025年8月14日
    4
  • 【面试题】Ajax的原理和优缺点总结

    【面试题】Ajax的原理和优缺点总结面试题 Ajax 的原理和优缺点总结 Ajax 的原理 Ajax 的原理简单来说就是通过 XmlHttpReque 对象来向服务器发送异步请求 从服务器获得数据 然后用 JavaScript 来操作 dom 从而更新页面 这其中最关键的一步就是从服务器获得请求数据 XmlHttpReque 是 Ajax 的核心机制 它是在 IE5 中首先引入的 是一种支持异步请求的技术 简单的说 也就是 JavaScri

    2026年3月26日
    2
  • 十大经典排序之:归并排序 |桶排序

    十大经典排序之:归并排序 |桶排序十大经典排序之 选择排序 堆排序选择排序选择排序原理算法实现例题堆排序堆排序原理算法实现例题

    2026年3月16日
    3
  • Manus实测,它和DeepSeek有什么不同?

    Manus实测,它和DeepSeek有什么不同?

    2026年3月15日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号