CSS设置超出范围滚动条和滚动条样式

CSS设置超出范围滚动条和滚动条样式

效果展示

当块级内容区域超出块级元素范围的时候，就会以滚动条的形式展示，你可以滚动里面的内容，里面的内容不会超出块级区域范围。

未设置超出隐藏，显示滚动条

超出隐藏，显示滚动条 overflow: scroll

示例代码

<div class="box">
	<div>
		10月23日开盘前，青岛啤酒（600600）发布公告，近日关注到媒体关于青岛啤酒三厂的相关报道。就相关媒体报道，公司高度重视，第一时间向公安机关报警。公安机关已介入调查。该批次麦芽已经全部封存。公司并已在青岛啤酒官方微博上进行了情况说明。目前公司生产经营情况一切正常。
	div>
	<div>10月20日晚间
		，青岛啤酒在其官方微博发布情况说明表示，针对10月19日网上出现的青岛啤酒三厂的相关视频，公司高度重视，第一时间向公安机关报警，公安机关已介入调查。目前，该批麦芽已经全部封存。公司继续加大管理力度，确保产品质量，欢迎广大消费者监督。
	div>
	<div>
		同日晚，山东省平度市市场监督管理局官方微博发布情况说明称，10月19日发现涉青岛啤酒三厂的网上相关视频后，立即成立调查小组进驻现场进行调查，并对视频所反映的该批原料全部封存。一经查实，将依法依规严肃处理。
	div>
div>

.box {
	width: 300px;
	height: 300px;
	border: 1px solid #ff060a;
	margin: 100px auto 0;
	padding: 12px;
	/* 数字超出范围换行 */
	/* word-wrap:break-word; */
	overflow: scroll;
}

在CSS 中，当内容超出容器范围后，我们在块级容器上对其设置了属性:

overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向滚动条*/
或者
overflow-y:scroll  /*只是y方向滚动条*/

滚动条样式

.box {
	width: 300px;
	height: 300px;
	border: 1px solid #ff060a;
	margin: 100px auto 0;
	padding: 12px;
	overflow-y: scroll;
}
/* 滚动条整体部分 */
.box::-webkit-scrollbar {
	width: 8px;
	height: 10px;
}
/* 滚动槽 */
.box::-webkit-scrollbar-track {
	border-radius: 1px;
	background: rgba(220, 220, 220, 0.2);
	-webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
}
/* 滚动条滑块样式 */
.box::-webkit-scrollbar-thumb {
	background-clip: content-box;
	border-radius: 6px;
	background: rgba(4, 103, 224, 0.5);
	-webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
}

设置滚动条样式之后效果图

设置滚动条常用的七个属性

1、::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等；
2、::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果；
3、::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果；
4、::-webkit-scrollbar-track-piece ：内层轨道，需要注意的就是它会覆盖第三个属性的样式；
5、::-webkit-scrollbar-thumb ：滚动条里面可以拖动的那部分；
6、::-webkit-scrollbar-corner ：边角，两个滚动条交汇处；
7、::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）。

属性后面可以设置的事件

:horizontal//适用于任何水平方向上的滚动条
:vertical//适用于任何垂直方向的滚动条
:decrement//适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
:increment//适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
:start//适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的前面
:end //适用于按钮和轨道碎片。表示对象（按钮轨道碎片）是否放在滑块的后面
:double-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
:single-button//适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
:no-button//表示轨道结束的位置没有按钮。
:corner-present//表示滚动条的角落是否存在。
:window-inactive//适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。