CSS自定义设置滚动条样式总结

时间：6年前阅读：5985

对div设置滚动条，设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏，接下来为大家介绍。

总结一个滚动条的组成部分(通常设置前三个即可)：

::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-thumb 滚动条里面的小方块（即滚动条滑块），能向上向下移动（或横向滚动条可往左往右移动）

::-webkit-scrollbar-track 滚动条的轨道（对应上图滚动条凹槽，里面装有Thumb，即滚动条滑块）

::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置

::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分

::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
        /*定义滚动条样式（高宽及背景）*/ 
        ::-webkit-scrollbar { 
            width: 6px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
            background: #007acc;
        } 
        /*定义滚动条轨道（凹槽）样式*/ 
        ::-webkit-scrollbar-track { 
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
            border-radius: 3px; 
        } 
        /*定义滑块 样式*/ 
        ::-webkit-scrollbar-thumb { 
            border-radius: 3px; 
            height: 100px;    /* 滚动条滑块长度 */
            background-color: #ccc; 

		</style>
	</head>
	<body>
	
<div style="height: 200px;overflow-y: scroll;background: #52cc8f;">
<p>Excel快速一次性删除表格中所有图片的三种方法</p>
<p>WordPress降级到以前的版本的实现方法</p>
<p>WordPress添加/移除多站点网络的默认页面</p>
<p>dedecms织梦怎么去除“DedeCMS提示信息”的方法</p>
<p>dedecms织梦首页标题被篡改或点击后跳转的赌博网站的解决方法</p>
<p>zblog图片和其他文件防盗链的实现方法</p>
<p>zblog安装提示：该数据库里已存在相关的表和数据，请更改表前缀或是更换清空数据库再安装的原因和解决方法</p>
<p>Emlog修改微语限制字数的方法</p>
<p>emlog过滤非法敏感词的方法</p>
 </div>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

CSS自定义设置滚动条样式总结

网友评论