1.overflow设置滚动条
/* 设置y轴滚动条 */overflow-y:auto/* 设置x轴滚动条 */overflow-x:auto
2.设置滚动条样式
::-webkit-scrollbar {width: 8px;height: 10px;}::-webkit-scrollbar-button {background-color: red;}::-webkit-scrollbar-track-piece {background: yellow;}::-webkit-scrollbar-thumb {background: blue;border-radius: 4px;}
3.html整体代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#main {width: 500px;height: 200px;overflow-y: auto;background: #9aacc4;}/*修改滚动条样式*/#main::-webkit-scrollbar {width: 4px;/*高宽分别对应横竖滚动条的尺寸*/height: 0px;}#main::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: rgba(0, 0, 0, 0.2);}#main::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 0;background: rgba(0, 0, 0, 0.1);}#main1 {width: 474px;height: 150px;margin-right: 20px;overflow-y: auto;background: darkseagreen;margin: 10px;}/*修改滚动条样式*/#main1::-webkit-scrollbar {width: 8px;height: 10px;}#main1::-webkit-scrollbar-button {background-color: red;}#main1::-webkit-scrollbar-track-piece {background: yellow;}#main1::-webkit-scrollbar-thumb {background: blue;border-radius: 4px;}ul li {margin-bottom: 30px;margin-right: 10px;background: chartreuse;}</style></head><body><div id="main"><ul><li>文本1文本1文本1文本1文本1</li><li>文本2文本2文本2文本2文本2</li><li>文本3文本3文本3文本3文本3</li><li>文本4文本4文本4文本4文本4</li><li>文本5文本5文本5文本5文本5</li></ul><div id="main1"><ul><li>文本1</li><li>文本1</li><li>文本1</li><li>文本1</li><li>文本1</li></ul></div></div></body></html>
