对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/post/8803.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知