html滚动条美化及取消
2022年8月22日
在浏览器中，如网页内容过多则会有横向和纵向两条滚动条，默认样式比较丑，可根据网页样式对其进行调整。
1 滚动条取消
取消显示滚动条共有如下两种方式：
1.1 在css内使用overflow取消滚动条
<style>
body{
/* 去掉水平滚动条 */
overflow-x: hidden;
/* 去掉竖直滚动条 */
overflow-y: hidden;
/* 去掉水平滚动条，显示竖直滚动条 */
overflow-x:hidden;overflow-y:scroll;
/* 水平和竖直方向滚动条全部隐藏 */
overflow:hidden;
}
1.2 在body标签使用scroll="no"隐藏水平和竖直方向滚动条
<!-- 表示全部隐藏 -->
<body scroll="no">
滚动条具有以下四种属性：
overflow-x : visible | auto | hidden | scroll
visible：不剪切内容也不添加滚动条。
auto：在需要时剪切内容并添加滚动条。
hidden：不显示超过对象高度的内容。
scroll：总是显示纵向滚动条。
2 滚动条美化
/* ::-webkit-scrollbar仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用 */
/* 整个滚动条 */
::-webkit-scrollbar {}
/* 滚动条上的按钮 (上下箭头) */
::-webkit-scrollbar-button {}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {}
/* 滚动条轨道 */
::-webkit-scrollbar-track {}
/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
::-webkit-scrollbar-corner {}
2.1 美化实例
2.1.1 CSS代码
<style>
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
background-color: #55abe6;
}
/* 整个滚动条 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/* 滚动条没有滑块的轨道部分 */
::-webkit-scrollbar-track-piece {
border-radius: 6px;
background: rgba(0, 0, 0, .1);
}
</style>
2.1.2 浏览器截图
