【Scss】实现溢出内容滚动下滑查看 和 修改滚动条样式

一.实现内容滚动下滑查看

分别是 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; /* 悬停状态下滑块背景颜色 */
}