首页 前端知识 CSS设置超出范围滚动条和滚动条样式

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

2024-04-13 09:04:23 前端知识 前端哥 263 101 我要收藏

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//适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4811.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!