overflow 属性滚动条样式

overflow 属性的介绍

overflow 设置了元素溢出时所需的行为（元素内容太大无法适应承载它的块级格式化上下文）;
是 overflow-x 和 overflow-y 属性的简写；
属性值

visible 内容正常渲染到`边距盒子`外部，不能被`裁剪`

hidden 
1. 内容不会渲染到`边距盒子`外部，能被`裁剪`;
2. 不提供滚动条且不支持用户滚动，内容可以`以编程的方式滚动`；

clip: clip 与 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动

scroll 
1. 内容不会渲染到`边距盒子`外部，能被`裁剪`;
2. 无论是否实际裁剪了任何内容，`浏览器总是显示滚动条`，以防止滚动条在内容改变时出现或者消失;

auto
1. 内容适应边距盒则正常展示与 `visible` 相同，但是会创建一个新的`块级格式化上下文`；
2. 内容不适应边距盒时，浏览器会根据溢出内容显示滚动条；

设置各浏览器下滚动条样式

FireFox 浏览器

火狐浏览器只有如下两个属性来设置滚动条样式
    scrollbar-width: thin;
    scrollbar-color: #e5e7ea #f7f8f8;

scrollbar-width
   1. auto: 浏览器默认的滚动条`宽度`；
   2. thin:  比浏览器默认样式窄一点的宽度；
   3. none: 影藏滚动条，元素依然可以滚动；

注意: 直接设置滚动条的宽度 10px 经测试是无效的

scrollbar-color
   1. auto: 浏览器默认的滚动条`颜色`;
   2. blue red :  blue 为滚动条的颜色，red 为滚动条轨道的颜色

注意： dark 、light 关键字经测试是无效的

Chrome 浏览器

body {
    position: relative;
    height: 100%;

    ::-webkit-scrollbar {
        width: 8px; // 竖滚动条
        height: 8px; // 横滚动条
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }
    ::-webkit-scrollbar-track {
        border-radius: 8px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.1);
    }
}

::-webkit-scrollbar:  滚动条整体部分，可以设置其中的属性有width, height 等;
::-webkit-scrollbar-thumb: 滑块；
::-webkit-scrollbar-track: 外层轨道；
::-webkit-scrollbar-button: 两端的按钮；
::-webkit-scrollbar-corner: 边角；
::-webkit-resizer: 滚动条右下角相交`拖动块`的样式；
::-webkit-scrollbar-track-piece: 内层滚动槽

最后编辑于：2023.09.27 11:09:37