CSS3自定义滚动条样式 -webkit-scrollbar

最新推荐文章于 2024-05-20 14:58:04 发布
最新推荐文章于 2024-05-20 14:58:04 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetyhyh/article/details/70258568
版权
 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>CSS3自定义滚动条</title>
 <style>
 header
 {
 font-family: 'Lobster', cursive;
 text-align: center;
 font-size: 25px;
 }
  
 #info
 {
 font-size: 18px;
 color: #555;
 text-align: center;
 margin-bottom: 25px;
 }
  
 a{
 color: #074E8C;
 }
  
 .scrollbar
 {
 margin-left: 30px;
 float: left;
 height: 300px;
 width: 65px;
 background: #F5F5F5;
 overflow-y: scroll;
 margin-bottom: 25px;
 }
  
 .force-overflow
 {
 min-height: 450px;
 }
  
 #wrapper
 {
 text-align: center;
 width: 500px;
 margin: auto;
 }
  
 /*
 * STYLE 1
 */
  
 #style-1::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
 }
  
 #style-1::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-1::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #555;
 }
  
 /*
 * STYLE 2
 */
  
 #style-2::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
 }
  
 #style-2::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-2::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #D62929;
 }
  
 /*
 * STYLE 3
 */
  
 #style-3::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-3::-webkit-scrollbar
 {
 width: 6px;
 background-color: #F5F5F5;
 }
  
 #style-3::-webkit-scrollbar-thumb
 {
 background-color: #000000;
 }
  
 /*
 * STYLE 4
 */
  
 #style-4::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-4::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-4::-webkit-scrollbar-thumb
 {
 background-color: #000000;
 border: 2px solid #555555;
 }
  
  
 /*
 * STYLE 5
 */
  
 #style-5::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-5::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-5::-webkit-scrollbar-thumb
 {
 background-color: #0ae;
  
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
 color-stop(.5, rgba(255, 255, 255, .2)),
 color-stop(.5, transparent), to(transparent));
 }
  
  
 /*
 * STYLE 6
 */
  
 #style-6::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-6::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-6::-webkit-scrollbar-thumb
 {
 background-color: #F90;
 background-image: -webkit-linear-gradient(45deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
 }
  
  
 /*
 * STYLE 7
 */
  
 #style-7::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-7::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-7::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-image: -webkit-gradient(linear,
 left bottom,
 left top,
 color-stop(0.44, rgb(122,153,217)),
 color-stop(0.72, rgb(73,125,189)),
 color-stop(0.86, rgb(28,58,148)));
 }
  
 /*
 * STYLE 8
 */
  
 #style-8::-webkit-scrollbar-track
 {
 border: 1px solid black;
 background-color: #F5F5F5;
 }
  
 #style-8::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-8::-webkit-scrollbar-thumb
 {
 background-color: #000000;
 }
  
  
 /*
 * STYLE 9
 */
  
 #style-9::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 }
  
 #style-9::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-9::-webkit-scrollbar-thumb
 {
 background-color: #F90;
 background-image: -webkit-linear-gradient(90deg,
 rgba(255, 255, 255, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, .2) 50%,
 rgba(255, 255, 255, .2) 75%,
 transparent 75%,
 transparent)
 }
  
  
 /*
 * STYLE 10
 */
  
 #style-10::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-10::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-10::-webkit-scrollbar-thumb
 {
 background-color: #AAA;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(90deg,
 rgba(0, 0, 0, .2) 25%,
 transparent 25%,
 transparent 50%,
 rgba(0, 0, 0, .2) 50%,
 rgba(0, 0, 0, .2) 75%,
 transparent 75%,
 transparent)
 }
  
  
 /*
 * STYLE 11
 */
  
 #style-11::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-11::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-11::-webkit-scrollbar-thumb
 {
 background-color: #3366FF;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(0deg,
 rgba(255, 255, 255, 0.5) 25%,
 transparent 25%,
 transparent 50%,
 rgba(255, 255, 255, 0.5) 50%,
 rgba(255, 255, 255, 0.5) 75%,
 transparent 75%,
 transparent)
 }
  
 /*
 * STYLE 12
 */
  
 #style-12::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #444444;
 }
  
 #style-12::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-12::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
 }
  
 /*
 * STYLE 13
 */
  
 #style-13::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
 border-radius: 10px;
 background-color: #CCCCCC;
 }
  
 #style-13::-webkit-scrollbar
 {
 width: 12px;
 background-color: #F5F5F5;
 }
  
 #style-13::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #D62929;
 background-image: -webkit-linear-gradient(90deg,
 transparent,
 rgba(0, 0, 0, 0.4) 50%,
 transparent,
 transparent)
 }
  
 /*
 * STYLE 14
 */
  
 #style-14::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
 background-color: #CCCCCC;
 }
  
 #style-14::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-14::-webkit-scrollbar-thumb
 {
 background-color: #FFF;
 background-image: -webkit-linear-gradient(90deg,
 rgba(0, 0, 0, 1) 0%,
 rgba(0, 0, 0, 1) 25%,
 transparent 100%,
 rgba(0, 0, 0, 1) 75%,
 transparent)
 }
  
 /*
 * STYLE 15
 */
  
 #style-15::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-15::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-15::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-gradient(linear,
 40% 0%,
 75% 84%,
 from(#4D9C41),
 to(#19911D),
 color-stop(.6,#54DE5D))
 }
  
 /*
 * STYLE 16
 */
  
 #style-16::-webkit-scrollbar-track
 {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
 background-color: #F5F5F5;
 border-radius: 10px;
 }
  
 #style-16::-webkit-scrollbar
 {
 width: 10px;
 background-color: #F5F5F5;
 }
  
 #style-16::-webkit-scrollbar-thumb
 {
 border-radius: 10px;
 background-color: #FFF;
 background-image: -webkit-linear-gradient(top,
 #e4f5fc 0%,
 #bfe8f9 50%,
 #9fd8ef 51%,
 #2ab0ed 100%);
 }
  
  
 </style>
 </head>
 <body>
 <div id="wrapper">
 <div class="scrollbar" id="style-default">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-1">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-2">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-3">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-4">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-5">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-6">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-7">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-8">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-9">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-10">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-11">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-13">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-14">
 <div class="force-overflow"></div>
 </div>
  
 <div class="scrollbar" id="style-15">
 <div class="force-overflow"></div>
 </div>
 </div>
 </body>
 </html>
sweetyhyh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义webkit内核浏览器滚动条
FuDesign2008的专栏
10-28 3362
webkit现在支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。 滚动条是一个伪元素，可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭，只按照用户自定义的css信息进行渲染。比如： ::-webkit-scrollbar { width: 13px; height: 13px; } width和height属性分别表示纵向滚动条的宽度和
CSS3自定义滚动条样式的示例代码
09-22
本篇文章主要介绍了CSS3自定义滚动条样式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
11-20
windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条， 故回头翻了一下CSS3， 还真能不用插件实现自定义滚动条的样式，正合我意 代码如下： /定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #F5F5F5; } /定义滚动条轨道 内阴影+圆角/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
::webkit-scrollbar 滚动条的相关属性
最新发布
m0_63811812的博客
05-20 245
::webkit-scrollbar 滚动条的相关属性
纯css修改浏览器scrollbar滚动条样式示例
09-22
主要介绍了纯css修改浏览器scrollbar滚动条样式示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css-scrollbar-tutorial:制作自定义CSS滚动条的示例代码
04-28
css-scrollbar-tutorial 基本教程的代码，介绍了如何使用CSS设置自定义滚动条的样式
CSS设置滚动条样式（兼容IE）
qq_38251335的博客
03-01 949
废话不多说，直接上demo，最下面有详细注释。 1、这是在webkit浏览器下显示的样式。            （个人比较喜欢简约点的） 2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法） 下面是代码： div id='scroll'>       di
-webkit-scrollbar
weixin_30536513的博客
10-10 101
-webkit-scrollbar 在IE中可以自定义滚动条的样式 ，基于webkit的浏览器现在也可以自定义其样式： ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track ...
webkit-scrollbar应用
qq_45944328的博客
07-05 1322
webkit-scrollbar应用
css滚动条-webkit-scrollbar
栈木地
02-19 2891
介绍之前，先穿插一个小知识点，大神略过； 经常看见 在css属性前加上-webkit之类的代码，也就是兼容不同浏览器的代码； -webkit 兼容chrome（谷歌）、safari（MacOS端浏览器）； -moz 兼容firefox（火狐）； -ms 兼容ie； 为什么讲这个，因为：修改滚动条样式只有谷歌支持； 所以：以下css属性直接根据需求带走； ::-webkit-scr...
详解css3自定义滚动条样式写法
01-19
本文介绍了css3自定义滚动条样式写法，分享给大家，具体如下： 先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动...
详解如何自定义CSS滚动条的样式
12-13
有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。那么如何自定义滚动条的样式呢？下面一起来看看吧。 1 基础知识 1.1 Webkit内核的css滚动条选择器 ::-webkit-scrollbar CSS伪类选择器影响了一...
CSS自定义WebKit内核浏览器滚动条实现代码
12-13
关于自定义浏览器滚动条的样式这一块，如果网站可以不考虑非WebKit内核浏览器的话，倒是可以试试只用CSS去实现。 简单地修改一下几项，就可以看到效果了： ::-webkit-scrollbar{width:12px; height:12px;} /*滚动...
纯CSS改变webkit内核浏览器的滚动条样式
01-19
基于webkit的浏览器现在可以自定义其滚动条的样式了，实现代码如下： 复制代码代码如下:::-webkit-scrollbar/*整体部分*/{width: 10px;height:10px;} ::-webkit-scrollbar-track/*滑动轨道*/{-webkit-box-shadow: ...
react-基于react的自定义滚动条组件
08-14
综上所述，创建基于React的自定义滚动条组件涉及到React组件封装、CSS样式定制、事件监听与处理、状态管理以及跨浏览器兼容性等多个方面。通过深入理解这些知识点，我们可以构建出既美观又功能完备的自定义滚动条...
纯CSS Edge滚动条（高仿），使用::-webkit-scrollbar
m0_61093435的博客
08-17 850
使用::-webkit-scrollbar制作纯CSS Edge滚动条（高仿）
CSS滚动条详解(::-webkit-scrollbar )
qq_41867900的博客
09-22 4663
:-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)，允许通过点击微调小方块的位置.::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
前端CSS 设置滚动条样式 ::-webkit-scrollbar
热门推荐
成茂峰
10-26 3万+
::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用. 你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的
css设置::-webkit-scrollbar
03-23
::-webkit-scrollbar 是一个用于自定义滚动条样式的伪元素选择器。它可以用来修改滚动条的外观，包括滚动条的宽度、颜色、背景等。 下面是一些常用的属性和值： 1. width/height：设置滚动条的宽度或高度。 2. background-color：设置滚动条的背景颜色。 3. border-radius：设置滚动条的边框圆角。 4. thumb：设置滚动条的滑块样式。 5. track：设置滚动条的轨道样式。 6. scrollbar-color：设置滚动条的颜色，包括滑块和轨道。 7. scrollbar-width：设置滚动条的宽度。 例如，下面的代码可以将滚动条的宽度设置为10px，背景颜色为灰色，滑块颜色为蓝色，轨道颜色为透明： ```css ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: transparent; } ::-webkit-scrollbar-thumb { background-color: blue; } ``` 注意，这些样式只在支持 WebKit 内核的浏览器中生效，如 Chrome、Safari 等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值