在HTML页面中,超出页面高度会自动在侧边显示滚动条。但是默认样式非常简单,看着也不美观;那么如何美化侧边滚动条呢?
可以通过 :-webkit-scrollbar
伪类元素实现美化滚动条,
CSS修改滚动条
/* 定义滚动条 */
body::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: #f3f3f3;
}
/* 定义滚动条轨道 */
body::-webkit-scrollbar-track {
box-shadow: none;
border-radius: 10px;
background-color: #f3f3f3;
}
/* 定义滑块 */
body::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: none;
background-color: #66758c;
}
/* 定义滚动条 */ body::-webkit-scrollbar { width: 5px; height: 5px; background-color: #f3f3f3; } /* 定义滚动条轨道 */ body::-webkit-scrollbar-track { box-shadow: none; border-radius: 10px; background-color: #f3f3f3; } /* 定义滑块 */ body::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: none; background-color: #66758c; }
将上面的代码加到<style>
或css
文件中,保存之后刷新页面即可看到效果。
上述的代码是比较简单的美化了一下,各位同学可以根据自己站点的风格样式等去自定义修改。
如果在DIV
标签中,比如做了超出滚动的样式,不想出现滚动条,可以直接给::-webkit-scrollbar
添加
display: none
进行隐藏即可。