overflow 属性滚动条样式

overflow 属性的介绍
  1. overflow 设置了元素溢出时所需的行为(元素内容太大无法适应承载它的块级格式化上下文);
  2. overflow-xoverflow-y 属性的简写;
  3. 属性值
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: 内层滚动槽
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。