使用CSS美化、隐藏滚动条

在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; 
}

将上面的代码加到<style> 或css文件中，保存之后刷新页面即可看到效果。

上述的代码是比较简单的美化了一下，各位同学可以根据自己站点的风格样式等去自定义修改。

如果在DIV标签中，比如做了超出滚动的样式，不想出现滚动条，可以直接给::-webkit-scrollbar添加

display: none进行隐藏即可。