1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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

对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

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: