CSS滚动条

最新推荐文章于 2024-05-21 00:00:00 发布

宣讯

最新推荐文章于 2024-05-21 00:00:00 发布

阅读量609

点赞数 1

分类专栏： css

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.:：webkit下面的CSS设置滚动条

主要有7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

horizontal 水平方向的滚动条

:vertical 垂直方向的滚动条

:decrement 应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)

:increment decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)

:start 伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。

:end 类似于start伪类，标识对象是否放到滑块的后面。

:double-button 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。

:single-button 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。

:no-button 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。

:corner-present 用于所有滚动条轨道，指示滚动条圆角是否显示。

:window-inactive 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
二：IE下面的CSS设置滚动条

IE下面就比较简单那了，自定义的项目比较少，全是颜色。

样式展示：

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; /*滚动条的基色*/

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.div1 {
			width: 800px;
			height: 800px;
			max-height: 400px;
			max-width: 400px;
			/* background-color: #00FFFF; */
			position: absolute;
			margin-left: -400px;
			left: 50%;
			top: 50%;
			margin-top: -200px;
			overflow-y: scroll;
			overflow-x: hidden;
		}
		.div2 {
			width: 700px;
			height: 700px;
		}
		
		/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
		::-webkit-scrollbar {
			width: 10px;
		}
		/*定义滚动条轨道 内阴影+圆角*/
		::-webkit-scrollbar-track {
			/* 水平位置、重置位置、半径、颜色 */
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
			border-radius: 10px;
			/*滚动条颜色 */
			background-color: #F5F5F5;
		}
		/*定义滑块 内阴影+圆角*/
		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
			/* 滑块颜色 */
			/* 1.纯色 */
			/* background-color: #555; */
			 /* 2.渐变 */
			 /* background: -webkit-linear-gradient(red, blue); */
			 background: -webkit-linear-gradient(left top, red , blue);
			 /* 3.双色条纹 */
			/* background: linear-gradient(#fb3 30%, #58a 30%); 
			 background-size: 100% 30px; */
			 /* 3.三色条纹 */
			 /* background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
			  background-size: 100% 45px; */
		}
	</style>
</head>

<body>
	<div class="div1">
		<div class="div2"></div>
	</div>
</body>
</html>

宣讯

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS滚动条

1.:：webkit下面的CSS设置滚动条主要有7个属性::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-...
复制链接

扫一扫