网页的默认滚动条并不是很美观，尤其是用于网页内部元素的时候，默认的样式更是格格不入。
对于滚动条的样式设置，只需调整以下属性之一的值。
::-webkit-scrollbar滚动条的整个部分，可以设置宽度什么的。
::-WebKit-scroll bar-按钮滚动条两端的按钮
::-WebKit-滚动条-轨道外部轨道
::-webkit-scrollbar-track-piece内滚槽
::-WebKit-滚动条-滚动滑块
::-WebKit-滚动条-角角落落
::-webkit-resizer定义右下角拖动块的样式。
举个栗子:
& ltdiv class = & # 034内容"& gt& ltdiv class = & # 034contentHeight & # 034& gt& lt/div >& lt/div >设置样式:
。内容{宽度:300px高度:300px溢出:隐藏；溢出-y:滚动；背景色:# 00FFFF边框:1px纯色# 000；}.content height { width:500 px；高度:500px}上面的样式规定，当内容大于父框架的大小时，滚动条垂直出现。
开始设置滚动条:
.content::-webkit-scrollbar {/*滚动条整体样式*//*高宽分别对应横竖滚动条的尺寸*/height: 50px;width: 5px;}.content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #535353;}.content::-webkit-scrollbar-track {/*滚动条里面轨道*/-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 5px;background: #fff;}.content::-webkit-scrollbar-button{width: 6px;height: 6px;background-color: red;}
。内容::-webkit-scrollbar {/*滚动条整体样式*/*高度和宽度分别对应水平和垂直滚动条的大小*/Height:50px；宽度:5px}.内容::-webkit-scrollbar-thumb {/*滚动条内的小方块*/border-radius:5px；-WebKit-box-shadow:inset 0 0 5px rgba(0，0，0，0.2)；背景:# 535353；}.内容::-webkit-scrollbar-track {/*滚动条内的轨道*/-WebKit-box-shadow:inset 0 05px rgba(0，0，0，0.2)；边框半径:5px背景:# fff}.内容::-WebKit-scroll bar-button { width:6px；高度:6px背景色:红色；}
自定义滚动条样式
本文来自铁石心肠投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/578666.html
微信扫一扫 
