1、什么时候出现滚动条
- 当容器元素的高度是限定的,容器中的内容的高度超过了容器元素的高度。
- 为容器元素设置了 overflow: hidden;
- 为容器元素设置了overflow-y: scroll;
1、实现隐藏滚动条,但还能滚动
容器盒子的高度是限定的,在下面示例中,容器盒子是body;
html,body{
overflow: hidden;
height: 80%;
}
body{
overflow-y: scroll;
}
body::-webkit-scrollbar{
display: none;
}
容器盒子是div元素或其它。
.container{
overflow: hidden;
height: 500px;
overflow-y: scroll;
}
.container::-webkit-scrollbar{
display: none;
}
2、修改滚动条样式
浏览器的滚动条自带样式很丑,可以自定义修改样式
但是文档中说:该特性是非标准的,请尽量不要在生产环境中使用它!
为容器元素设置以下伪元素样式
- ::-webkit-scrollbar — 整个滚动条.
- ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
- ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
- ::-webkit-scrollbar-track — 滚动条轨道.
- ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
- ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
- ::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
举例:
这个是必须先设置的,这个设置了后面的那些设置才会有效。
width是滚动条的宽度,
height是什么作用不清楚
.container::-webkit-scrollbar {
width: 18px;
height: 8px;
}
滚动条滑块的样式
.container::-webkit-scrollbar-thumb {
background: rgb(122, 214, 61);
border-radius: 5px;
}
鼠标hover滑块时滑块的样式,如果不设置,就采用不hover时的样式。
.container::-webkit-scrollbar-thumb:hover {
background: rgb(167, 13, 13);
border-radius: 0;
}
轨道的样式
.container::-webkit-scrollbar-track {
background: rgb(0, 38, 255);
}