用css自定义滚动条样式

最新推荐文章于 2023-12-31 03:59:05 发布
最新推荐文章于 2023-12-31 03:59:05 发布
阅读量94 收藏
点赞数
文章标签： 操作系统 前端 ViewUI
原文链接：http://www.cnblogs.com/xuweili/articles/3403090.html
版权

如果你是一个搞网页前端的，有必要了解一下自定义滚动条样式这个东东。目前支持自定义滚动条样式的有IE浏览器、webkit内核浏览器（chrome）。

IE下的滚动条样式

1、样式规则
scrollbar-arrow-color: color; /*上下按钮上三角箭头的颜色*/
scrollbar-face-color: color; /*滚动条凸出部分的颜色*/
scrollbar-3dlight-color: color; /*滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: color; /*滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*滚动条强阴影的颜色*/
scrollbar-track-color: color; /*滚动条背景颜色*/
 
scrollbar-base-color: color; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
/*以上2项适用与：body、div、textarea、iframe*/

用css自定义滚动条样式

2、Overflow内容溢出时的设置
  • overflow 水平及垂直方向内容溢出时的设置
  • overflow-x 水平方向内容溢出时的设置
  • overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto

  • visible 默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。
  • hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
  • scroll 无论内容是否超越范围，都将显示滚动条。
  • auto 当内容超出范围时，显示滚动条，否则不显示。
3、运用
<!--没有水平滚动条-->
<div style="overflow-x: hidden;">test</div>
<!--没有垂直滚动条-->
<div style="overflow-y: hidden;">test</div>
<!--没有滚动条-->
<div style="overflow: hidden;">test</div>
<!--自动显示滚动条-->
<div style="height: 100px; width: 100px; overflow: auto;">test</div>
4、示例
<div style="border: 1px #9EBFE8 solid; width: 250px; height: 150px; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; overflow-x: hidden;">
<div style="width: 300px; height: 200px;">蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条蓝色 没有水平滚动条</div>
</div>
 
<div style="border: 1px #59ADBB solid; width: 250px; height: 150px; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB; overflow-y: hidden;">
<div style="width: 300px; height: 200px;">绿色 没有垂直滚动条绿色 没有垂直滚动条绿色 没有垂直滚动条绿色 没有垂直滚动条绿色 没有垂直滚动条绿色 没有垂直滚动条</div>
</div>
 
<div style="border: 1px #FDDEE8 solid; width: 250px; height: 150px; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0; overflow: hidden;">
<div style="width: 2300px; height: 200px;">浅粉红 没有滚动条浅粉红 没有滚动条浅粉红 没有滚动条浅粉红 没有滚动条浅粉红 没有滚动条浅粉红 没有滚动条</div>
</div>
 
<div style="border: 1px #333333 solid; width: 250px; height: 150px; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC; overflow: auto;">
<div style="width: 300px; height: 200px;">黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条黑色 自动显示滚动条</div>
</div>
 
<div style="border: 1px #d9d9d9 solid; width: 250px; height: 150px; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff;">
<div style="width: 300px; height: 200px;">灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示 灰色 超出范围强制显示</div>
</div>

webkit内核下的滚动条样式(chrome)

滚动条是一个伪元素，可以自定义样式。这个伪类可以将webkit自身的滚动条渲染关闭，只按照用户自定义的css信息进行渲染。

1、滚动条的所有伪元素
::-webkit-scrollbar /* 滚动条整体部分 */
::-webkit-scrollbar-button /* 滚动条两端的按钮 */ 
::-webkit-scrollbar-track /* 外层轨道 */ 
::-webkit-scrollbar-track-piece /*/ 内层轨道，滚动条中间部分 */ 
::-webkit-scrollbar-thumb /* 滑块 */ 
::-webkit-scrollbar-corner /* 边角 */ 
::-webkit-resizer /* 右下角拖动块 */

用css自定义滚动条样式
webkit提供的不止这些，任何对象都可以设置：边框、阴影、背景图片等等，创建的滚动条仍然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中:

  • :horizontal – horizontal伪类应用于水平方向的滚动条
  • :vertical – vertical伪类应用于竖直方向的滚动条
  • :decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
  • :increment – increment伪类和decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
  • :start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
  • :end – 类似于start伪类，标识对象是否放到滑块的后面。
  • :double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
  • :single-button – 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
  • :no-button – 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
  • :corner-present – 用于所有滚动条轨道，指示滚动条圆角是否显示。
  • :window-inactive – 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
  • ::-webkit-scrollbar-track-piece:start {/*滚动条上半边或左半边*/}
  • ::-webkit-scrollbar-thumb:window-inactive {/*当焦点不在当前区域滑块的状态*/}
  • ::-webkit-scrollbar-button:horizontal:decrement:hover {/*当鼠标在水平滚动条下面的按钮上的状态*/}

另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以适用于滚动条中。

2、示例
<style>
::-webkit-scrollbar {
	width:10px;
	margin-right:2px
}
::-webkit-scrollbar:horizontal {
	height:10px;
	margin-bottom:2px
}
::-webkit-scrollbar-track {
    border-radius: 10px;
}
::-webkit-scrollbar-track-piece {
    background-color: #333333;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	width:10px;
    border-radius: 5px;
    background: #CBCBCB; 
}
::-webkit-scrollbar-thumb:hover {
	background: #909090; 
}
.test{width: 400px; height: 200px;overflow:auto;}
</style>

 

<div class="test">
<table  width="500" border="0">
  <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
  <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
  <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
    <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
    <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
    <tr>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
    <td>样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1样式1</td>
  </tr>
</table>
</div>

转载于:https://www.cnblogs.com/xuweili/articles/3403090.html

weixin_30807677
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浏览器页面滚动条美化（样式）
wang839305939的博客
06-11 4097
浏览器页面滚动条美化（样式） 最近测试反应我们的产品在浏览器中当页面宽高出现溢出的情况下页面滚动条太丑了！让我们美化一下！然后花了一点时间专研了一下关于滚动条样式的相关知识，今天就在这里和大家一起分享一下： 其实滚动条样式是由两部分构成，一是滚动槽，二就是滑块，其实我们可以把他理解成轨道和火车的关系就行了，浏览器默认的样式其实就像我们传统的绿皮火车，现在的高铁其实就像修改后的样式，改
css-隐藏网页页面右侧滚动条
感谢遇到的每一个人的博客
08-28 1万+
逻辑：三个DIV，大“div” 设置一个高度、超出高度内容隐藏，小“div”设置一个高度可以和大“div”高度一样，中“div”设置超出大“div”内容xian显示滑动条，并且添加 “隐藏滚轮”样式； 原理：就是小盒子和大盒子高度都写固定了，但是小盒子内容很多超过大盒子，但是大盒子 overflow：hidden 隐藏了，只要给中盒子添加 超出部分显示滚动条就好了，然后中盒子使用 “隐藏滚轮”样...
css 修改浏览器滚动条样式（火狐Firefox，谷歌google）
PrimaryColor
12-24 1万+
浏览器使用的内核说明： 浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 Safari webkit 从Safari推出之时起，它的渲染引擎就是Webkit，一提到 webkit，首先想到的便是 chrome，可以说，chrome 将 Webkit内核 深入人心，殊不知，Webkit 的
css滚动条样式指南
qq_42880714的博客
08-01 1万+
css滚动条样式指南
css滚动条自定义样式
你离优秀差多少
05-26 109
css滚动条自定义样式。
详解css3自定义滚动条样式写法
01-19
本文介绍了css3自定义滚动条样式写法，分享给大家，具体如下： 先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动...
CSS3自定义滚动条样式的示例代码
09-22
本篇文章主要介绍了CSS3自定义滚动条样式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解如何自定义CSS滚动条的样式
12-13
有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。那么如何自定义滚动条的样式呢？下面一起来看看吧。 1 基础知识 1.1 Webkit内核的css滚动条选择器 ::-webkit-scrollbar CSS伪类选择器影响了一...
自定义CSS样式代码设置,网页下拉滚动条样式！
最新发布
m0_67888657的博客
12-31 459
第一步：找到可添加自定义CSS样式代码的地方复制以下代码：如图所视：可修改调整样式::-webkit-scrollbar-track选择器用于选择滚动条的轨道样式。 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);设置轨道内部的阴影效果，使其看起来有立体感。 background: #f6f6f6;设置轨道的背景颜色为淡灰色。
CSS 自定义滚动条
wwyxjjz的博客
07-13 920
效果图如下： 代码如下： (颜色可自行调节) ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #f5f5f5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-trac......
前端自定义滚动条
不凡乃大的博客
08-17 847
代码】前端自定义滚动条。
labview在2048中添加时间滚动条_Chrome优化深色模式：滚动条颜色也能跟随变化 使上网更具沉浸感...
weixin_39752941的博客
12-03 156
为了让谷歌浏览器的深色模式(Dark Mode)变得更加一致，谷歌在 Chrome 的滚动条中添加了对深色模式的支持。虽然我们很多人在上网过程中可能不太关注滚动条，但这毕竟是个可喜的变化，从而让 Chrome 的深色模式更具沉浸感。滚动条并不跟随网页浏览器的模式设置，并非是 Chrome 独有的问题。包括 Firefox 以及其他基于 Chromium 的诸多浏览器都存在同样的问题。谷歌现在终于提...
HTML自定义滚动条附效果图和完整源码
a_靖的博客
03-16 2560
自定义滚动条，隐藏IOS的默认滚动条
页面滚动条样式修改
qq_32578989的博客
06-21 1199
全局的样式文件中添加重置滚动条样式代码： /* 滚动条整体样式 */ ::-webkit-scrollbar { width: 4px; height: 4px; } /* 滚动条里面小方块 */ ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; } 样式图片： /*滚动条整体样式*/ ::-webkit-scrollbar { width: 10px; /*高宽分别对应横竖滚.
CSS 自定义滚动条样式
王坦的博客
12-26 1万+
CSS自定义滚动条样式
iframe滚动条样式
Silverlight,WPF,WCF
08-07 2035
Body { scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ scrollbar-face-color: #333; /*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/ scrollbar-darkshadow-colo
CSS3自定义滚动条样式 -webkit-scrollbar
热门推荐
韩世雷 程序员专栏
10-23 30万+
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？ 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示
css 自定义滚动条
09-22
CSS提供了一种自定义滚动条的方法。可以使用`::-webkit-scrollbar`伪元素来设置整个滚动条的样式，使用`::-webkit-scrollbar-thumb`来设置滑块的样式，使用`::-webkit-scrollbar-track`来设置轨道的样式。可以使用`::-webkit-scrollbar-thumb:horizontal`和`::-webkit-scrollbar-track:horizontal`来设置水平方向上的滑块和轨道的样式。 以下是一个示例代码来自定义滚动条的样式： ``` ::-webkit-scrollbar { width: 15px; } ::-webkit-scrollbar-thumb { background-color: lightsteelblue; } ::-webkit-scrollbar-track { background-color: lightgreen; } ::-webkit-scrollbar-thumb:horizontal { background-color: lightseagreen; } ::-webkit-scrollbar-track:horizontal { background-color: lightsalmon; } ::-webkit-scrollbar-corner { background-color: lightcoral; } ``` 这段代码将会设置滚动条的宽度为15px，滑块的背景颜色为lightsteelblue，轨道的背景颜色为lightgreen，水平方向上滑块的背景颜色为lightseagreen，水平方向上轨道的背景颜色为lightsalmon，滚动条交汇处的背景颜色为lightcoral。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值