赞
踩
先看效果图
附上效果图代码:
- 1.style部分
- <style>
- /*定义滚动条样式(高宽及背景)*/
- ::-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>
-
- 2.body部分
- <div style="height: 200px;overflow-y: scroll;background: #52cc8f;">
- 11111111
- <p>11111111111111111111</p>
- <p>11111111111111111111</p>
- <p>11111111111111111111</p>
- <p>11111111111111111111</p>
- <p>11111111111111111111</p>
- <p>11111111111111111111</p>
- <p>11111111111111111111</p>
- <p>11111111111111111111</p>
- <p>11111111111111111111</p>
- <p>11111111111111111111</p>
- </div>
最后,总结 一个滚动条的组成部分(通常设置前三个即可):
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。