1、overflow-y : 设置当对象的内容超过其指定高度时如何管理内容;overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容。
参数:
visible:扩大面积以显示所有内容
auto:仅当内容超出限定值时添加滚动条
hidden:总是隐藏滚动条
scroll:总是显示滚动条
2、height : 设置滚动条的高度(修改其后数值即可)。
3、滚动条颜色参数设置:
scrollbar-3d-light-color 设置或检索滚动条亮边框颜色
scrollbar-highlight-color 设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色
scrollbar-face-color 设置或检索滚动条3D表面(ThreedFace)的颜色
scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色
scrollbar-shadow-color 设置或检索滚动条3D界面的暗边(ThreedShadow)颜色
scrollbar-dark-shadow-color 设置或检索滚动条暗边框(ThreedDarkShadow)颜色
scrollbar-base-color 设置或检索滚动条基准颜色
设置 overflow 属性:
div{
width:150px
height:150px
overflow:auto
}
overflow属性如下:
auto:当此div子元素宽和高大于该div的宽和高时,则会出现对应方向上的滚动条。
scroll:不管子元素的宽和高,都出现滚动条,但当子元素宽和高小于父元素时,滚动条不能拖动。
推荐使用auto属性,如果只想让水平方向出现滚动条,则使用overflow-x:auto
在css设置可改变大小的div滚动条样式方法:
1.首先新建html文档,进入代码书写界面。
2.在</head>和<body>的里面写入代码,在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码工作做完后,就可以查看效果,效果如下红框所示,滚动条设置完成。