Skip to content

Latest commit

 

History

History
92 lines (75 loc) · 2.85 KB

3.5.9 scrollbar-gutter.md

File metadata and controls

92 lines (75 loc) · 2.85 KB

3.5.9 scrollbar-gutter

scrollbar-color 和 scrollbar-width

这两个 CSS 属性只有 Firefox 浏览器支持

其中 scrollbar-color 可以定义滚动条的颜色，语法如下：

scrollbar-color: auto | 滑杆颜色 轨道颜色;
scrollbar-width 可以设置滚动条的宽度，不过这个宽度不能随意指定，是有约束的，语法如下所示：

scrollbar-width: auto | thin | none;
auto 就是默认的尺寸，在 Windows 系统下是 17px；
thin 是窄滚动条，在 Windows 系统下是 8px；
none 没有滚动条，宽度为0，但是内容依然可以滚动
  • demo
<h4 class="fill">窄滚动条</h4>
<div class="scroll scroll-thin">
    <p>根据测试，窄滚动条在Windows操作系统中占据的宽度是8px。</p>
    <p>测试方法很简单，滚动容器的宽度减去子元素的宽度即可。</p>
    <p>打开控制台，审查对应的元素，就可以看到容器的宽度和子元素的宽度，两者相互减，就是滚动条的宽度了。</p>
</div>

<h4 class="fill">无滚动条-可滚动</h4>
<div class="scroll scroll-none">
    <p>根据测试，窄滚动条在Windows操作系统中占据的宽度是8px。</p>
    <p>测试方法很简单，滚动容器的宽度减去子元素的宽度即可。</p>
    <p>打开控制台，审查对应的元素，就可以看到容器的宽度和子元素的宽度，两者相互减，就是滚动条的宽度了。</p>
</div>
CSS：
.scroll {
    border: 1px solid #665;
    height: 150px;
    overflow: auto;
    --thumb-color: #bbb;
    --track-color: #ddd;
}
.scroll-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--thumb-color) var(--track-color);
}
.scroll-none {
    scrollbar-width: none;
}
.scroll-thin::-webkit-scrollbar {
    width: 8px; height: 8px;
}
.scroll-thin::-webkit-scrollbar-thumb {
    background-color: var(--thumb-color);
}
.scroll-thin::-webkit-scrollbar-track {
    background-color: var(--track-color);
}
.scroll-none::-webkit-scrollbar {
    width: 0; height: 0;
}

scrollbar-gutter

scrollbar-gutter 可以让滚动条出现的时候内容不晃动,可以提前预留滚动条位置

 /* Initial value */
scrollbar-gutter: auto;

/* "stable" keyword, with optional modifier */
scrollbar-gutter: stable;
scrollbar-gutter: stable both-edges;

/* Global values */
scrollbar-gutter: inherit;
scrollbar-gutter: initial;
scrollbar-gutter: revert;
  • auto
    • 就是默认的表现。没有滚动条的时候，内容尽可能占据宽度，有了滚动条，可用宽度减小。
  • stable
    • 如果 overflow 属性计算值不是 visible，则提前预留好空白区域，这样滚动条出现的时候，整个结构和布局都是稳定的。
  • both-edges -这个是让左右两侧同时预留好空白区域，目的是让局部绝对居中对称

参考