一.实现内容滚动下滑查看
分别是 overflow:overlay 和 overflow:auto;
生效场景: 当盒子内容超过盒子高度时
1.overflow:overlay
- 该属性是css层叠性,适用于webkit浏览器
- 当内容溢出容器时 容器就会显示滚动条 并在滚动时将内容滚动到视图内
- 不同于传统的滚动条样式 滚动条以浮动在内容之上的方式呈现 这意味滚动条不会占用容器的实际空间 并且不会导致内容宽度 和 高度的变化
- 当容器内容没有溢出时 没有滚动条显示
2.overflow:auto;
- 该属性适用于所有主流浏览器
- 同上
- 当容器内容没有溢出内容时 没有滚动条显示
- 如果内容未溢出容器 则该属性不会产生任何影响 容器将按照默认行为进行布局
使用这两个属性可以根据需要容器元素中实现滚动功能 : overlay优势是滚动条样式较优雅并且不会占用实际空间,而auto是一个通用的滚动属性 适合各种浏览器
二.修改滚动条样式
/* 自定义滚动条样式 */
::-webkit-scrollbar {
width: 5px; /* 滚动条宽度 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #ffffff; /* 轨道背景颜色 */
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background-color: #e6e6e6; /* 滑块背景颜色 */
}
/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
background-color: #e6e6e6; /* 悬停状态下滑块背景颜色 */
}