欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS设置滚动条样式(兼容IE)

程序员文章站 2024-01-28 16:06:40
...

仅供参考,根据注释自己调整,,,, 

#scroll{
        width:200px;
        height:200px;
        overflow:auto;
		margin-bottom: 20px;
	}
	#scroll div{
			width:400px;
			height:400px;
	}
	#scroll::-webkit-scrollbar{/*滚动条整体部分,其中的属性有width,height,background,border等(就和一个块级元素一样)(位置1)*/
			width:10px;
			height:10px;
	}
	#scroll::-webkit-scrollbar-button{/*滚动条两端的按钮,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置2)*/
			background:#74D334;
	}
	#scroll::-webkit-scrollbar-track{/*外层轨道,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置3)*/
			background:#FF66D5;
	}
	#scroll::-webkit-scrollbar-track-piece{/*内层轨道,滚动条中间部分(位置4)*/
			background:#FF66D5;
	}
	#scroll::-webkit-scrollbar-thumb{/*滚动条里面可以拖动的那部分(位置5)*/
		background:#FFA711;
		border-radius:4px;
	}
	#scroll::-webkit-scrollbar-corner {/*边角(位置6)*/
		background:#82AFFF; 
	}
	#scroll::-webkit-scrollbar-resizer  {/*定义右下角拖动块的样式(位置7)*/
		background:#FF0BEE;
	}
	#scroll{
		scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/ 
		scrollbar-face-color: #333; /**//*立体滚动条的颜色*/ 
		scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/ 
		scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/ 
		scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/ 
		scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/ 
		scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/ 
		scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/ 
	}

CSS设置滚动条样式(兼容IE)

CSS设置滚动条样式(兼容IE) 

相关标签: 滚动条