CSS 设置滚动条样式

已于 2025-01-17 16:27:06 修改
阅读量748 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： CSS
于 2019-12-02 08:49:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/103342713
本文介绍如何在Chrome浏览器中自定义滚动条的样式，包括滑块的颜色设定及滚动条的整体尺寸调整，实现美观且个性化的网页设计。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目前，基于 webkit 内核的浏览器总体市场占用率比较高；特别是在移动端，大部分浏览器都是基于 webkit。

/*定义滑块*/
::-webkit-scrollbar-thumb {
  background:rgba(1,172,213,0.6);
}
/* 滑动条样式 */
::-webkit-scrollbar{
  width: 6px;
  height:6px;
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
  background:rgba(255,255,255,1);
  border:1px solid rgba(159,177,195,1);
}
使用CSS自定义滚动条样式
HackWhisper的博客
09-21 487
在Web开发中，滚动条是用户与页面交互的重要组成部分之一。默认情况下，浏览器会为滚动条提供默认样式，但是我们可以通过使用CSS来自定义滚动条的外观，以使其与我们的网站或应用程序的设计风格保持一致。本文将介绍如何使用CSS来设置滚动条的样式。
web前端入门到实战：CSS设置滚动条样式
软件开发-前端开发-IT
10-11 1808
webkit滚动条样式重置 1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。 2、scrollbar corner为横向和竖向的交叉角区域 3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件 组成结构图如下： 一旦发现滚动条的自定义...
008-CSS-谷歌浏览器滚动条设置
loveEveryWeb的博客
03-02 799
【代码】008-CSS-谷歌浏览器滚动条设置。
谷歌浏览器滚动条样式设置
u011705317的专栏
06-24 8404
/*---滚动条默认显示样式--*/   ::-webkit-scrollbar-thumb{      background-color:#018EE8;      height:50px;      outline-offset:-2px;      outline:2px solid #fff;      -webkit-border-radius:4px;    
全局滚动条样式修改【适用于谷歌浏览器（已测试）】
最新发布
Dreamaple
05-20 179
【代码】全局滚动条样式修改【适用于谷歌浏览器（已测试）】
chrome滚动条样式
cangowu的博客
11-25 640
/**     chrome  **/ ::-webkit-scrollbar-track-piece {   background-color: #fff;   -webkit-border-radius: 0; } ::-webkit-scrollbar {   width: 8px;   height: 8px; } ::-webkit-scrollbar-th
ie、Chrome、Firefox隐藏滚动条及自定义样式
leo_shire的博客
05-25 2115
隐藏滚动条 html { /*隐藏滚动条，当IE下溢出，仍然可以滚动*/ -ms-overflow-style:none; } /*Chrome下隐藏滚动条，溢出可以透明滚动*/ html::-webkit-scrollbar{width:0px} Firefox隐藏滚动条可以用以下方法： 大体思路是在div外面再套一个div。这个div设置overflow:hidden，而内...
使用CSS美化Chrome下的滚动条样式
qq_43682817的博客
01-17 728
使用CSS美化Chrome下的滚动条样式
CSS 设置滚动条样式的实例代码
09-24
以下是一个简单的滚动条样式设置的例子： ```css ::-webkit-scrollbar { width: 16px; height: 16px; background-color: #F5F5F5; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0...
CSS 设置滚动条样式的实现
11-21
以下将详细讲解如何通过CSS设置滚动条样式，并提供一些关键知识点。 首先，滚动条主要由以下几个部分构成： 1. **scrollbar**: 整个滚动条，包括按钮和轨道。 2. **scrollbar-button**: 滚动条轨道的两端按钮，...
Chrome滚动条样式
yuyu_2019的博客
02-24 271
.ordered-scrollbar::-webkit-scrollbar { /*滚动条整体样式*/ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .ordered-scrollbar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; background: #364b71; } .ordered-scrollbar::-webkit-scrollbar-track
Chrome 滚动条美化 原创
10-03
Chrome 滚动条美化 原创 淡雅风格, 不仔细看看不出来, 而且类似透明效果 将文件复制到 win7系统: C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets windows xp类似: 到 C:\********\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
教你自定义谷歌浏览器的滚动条样式
10-12
由xiedandan.com 谢单单爱折腾发布,
chrome 滚动条
Young_Gao的博客
03-28 758
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/          ::-webkit-scrollbar          {              width: 8px;              height: 8px;              background-color: #F5F5F5;          }                    /...
自定义Chrome 滚动条样式
weixin_30270561的博客
07-30 785
有不少可以帮你修改Chrome默认滚动条样式的扩展，Scroll Bar X就是其中的佼佼者，但是这个扩展在安装的时候提示说会存取所有的网站数据，这就让人感觉很难以接受了。其实咱们可以自己动手，丰衣足食。首先在自己的系统里找到如下这个.css文件： Windows:%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\...
火狐浏览器滚动条的样式问题
sinat_27746197的博客
05-29 2242
基于webkit的浏览器： /* 滚动条样式 */ ::-webkit-scrollbar{ width: 4px; height: 6px; } ::-webkit-scrollbar-thumb{ border-radius: 1em; background-color: rgba(50,50,50,.3); } ::-webkit-scrollbar-track{ border-radius: 1em; background-colo
使用CSS自定义浏览器滚动条 (webkit 已最新支持 scrollbar-width)
墨蓝天上 (MoLan)
02-06 8963
在不同的浏览器下默认的滚动条样式是不一样的，为了美观和统一必须修改滚动条的样式。网页中我们可以使用CSS在默认滚动条的基础上直接进行样式修改。 通常来说，webkit内核的浏览器是仅支持"-webkit-scrollbar"、却不支持"scrollbar-width"的。而在最近，webkit内核的浏览器也开始支持"scrollbar-width"了。 本文将带你了解 webkit对"scrollbar-width"的支持表现、使用中可能遇到的问题，以及如何在浏览器兼容性之间作出效果的平衡。
chrome设置css样式
weixin_30608131的博客
05-16 274
对照网页css样式，根据自己喜好编辑Custom.css文件，下面以设置网页为浅绿色为例说明用法： 在Custom.css中添加下面一条css： html, body {background-color: #CCE8CC!important;} 转载于:https://www.cnblogs.com/cloud2rain/archive/2013/05/16/3082782.ht...
浏览器自带的滚动条样式
baibaider的博客
08-09 4217
通常只适用于chrome： <div class="parent"> <div class="child"></div> </div> .parent{ overflow: auto; width:100px; background-color: #ffcccc;...
css 设置滚动条样式
10-16
可以使用 CSS 的 ::-webkit-scrollbar 伪元素来设置滚动条的样式，具体代码如下： ``` /* 设置滚动条整体样式 */ ::-webkit-scrollbar { width: 10px; /* 滚动条宽度 */ } /* 设置滚动条轨道样式 */ ::-webkit-scrollbar-track { background-color: #f5f5f5; /* 轨道背景色 */ } /* 设置滚动条滑块样式 */ ::-webkit-scrollbar-thumb { background-color: #ccc; /* 滑块颜色 */ border-radius: 5px; /* 滑块圆角 */ } /* 设置滚动条滑块在hover状态下的样式 */ ::-webkit-scrollbar-thumb:hover { background-color: #999; /* 滑块hover时的颜色 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值