添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
豪爽的鼠标  ·  变量·  3 周前    · 
会开车的滑板  ·  Apache OpenOffice ...·  2 月前    · 
低调的菠菜  ·  The Highest Standard ...·  3 月前    · 

还有完没完,怎么又来了个 scrollbar-gutter?

这篇文章发布于 2022年01月12日,星期三,01:02,归类于 CSS相关 。 阅读 21091 次, 今日 13 次 15 条评论

一、scrollbar-color和scrollbar-width

scrollbar-color scrollbar-width 这两个CSS属性在在我的新书 《CSS新世界》 中有过介绍,在章节13.1.5。

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

scrollbar-color: auto | 滑杆颜色 轨道颜色;

scrollbar-width 可以设置滚动条的宽度,不过这个宽度不能随意指定,是有约束的,语法如下所示:

scrollbar-width: auto | thin | none;
  • auto 就是默认的尺寸,在 Windows 系统下是 17px;
  • thin 是窄滚动条,在 Windows 系统下是 8px;
  • none 没有滚动条,宽度为0,但是内容依然可以滚动。
  • .container {
        scrollbar-color: #bbb #ddd;
        scrollbar-width: thin;
    

    则在 Firefox 浏览器下会有下图所示的效果:

    为什么要强调 Firefox 浏览器呢? 因为这两个 CSS 属性只有 Firefox 浏览器支持。

    有人一看这兼容性,立刻关闭浏览器走人,兼容性这么差,说个寂寞啊。

    淡定,Chrome 和 Safari 浏览器有一套自己的自定义方案,估计这个很多前端开发都玩过,那就是 ::-webkit-scrollbar 伪元素。

    完整的伪元素包括这些:

    ::-webkit-scrollbar
    整个滚动条,可以设置任意的尺寸大小,包括 0,也就是滚动条不可见。
    ::-webkit-scrollbar-button
    滚动条按钮,就是顶部和底部有小箭头的那个按钮。
    ::-webkit-scrollbar-thumb
    可拖拽的那个滑杆。
    ::-webkit-scrollbar-track
    滚动条的轨道。
    ::-webkit-scrollbar-track-piece
    部分轨道,这个不太常用,指未被滚动的区域。
    ::-webkit-scrollbar-corner
    滚动的底部角落,出现在水平滚动条和垂直滚动条同时出现的时候,平常滚动条自定义不会用到这个。
    ::-webkit-resizer
    这个是 <textarea> 文本域默认右下角的缩放条,或者 overflow 不是 visibile 同时设置 resize 属性的元素右下角的拖拽拖动条。

    于是,现代浏览器对滚动条进行完全 UI 的样式自定义已经非常成熟与稳健了,这里有个demo,可以体验最终实现的效果(需要Windows操作系统,MacOS需要系统层面设置滚动条常驻才行):现代浏览器全兼容的滚动条样式的自定义demo

    本来以为 scrollbar 的故事到此就告一段落了,没想到,前段时间又发现了一个 scrollbar 相关的属性,scrollbar-gutter,这还真就没完没了了。

    二、scrollbar-gutter又是干嘛的呢?

    很简单,那就是 scrollbar-gutter 可以让滚动条出现的时候内容不晃动。

    这个特性其实挺实用的,我以前专门写过文章解决过此问题,详见“CSS vw让overflow:auto页面滚动条出现时不跳动”,兼容到 IE9 浏览器。

    不过文中提到的解决方法并不能覆盖 100% 场景,现在有了 scrollbar-gutter 属性,我们的实现就可以进一步增强了。

    语法比较简单:

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

    定义3个容器,设置可滚动,然后每个容器的 scrollbar-gutter 值不一样:

    <div class="x auto"></div>
    <div class="x stable"></div>
    <div class="x both-edges"></div>
    max-width: 320px; height: 150px; border: 1px solid; overflow: auto; .auto { scrollbar-gutter: auto; .stable { scrollbar-gutter: stable; .both-edges { scrollbar-gutter: stable both-edges;

    为何对比效果,每一个 scrollbar-gutter 值需要对比有滚动条和没有滚动条才行,我们来逐个看下每个属性值的效果。

    首先是默认值 auto

    <h4>auto</h4>
    <div class="x auto">
        <p>...没想到《CSS新世界》...</p>
    <div class="x auto">
        <p>...没想到《CSS新世界》...</p>
        <img src="0.jpg">
    

    可以看到滚动条出现后,文字的排版发生了变化,因为原本文字占据的空间被滚动条挤占了,如下截图示意:

    然后是 stable,stable 顾名思意是稳定的意思,这里指的就是布局稳定。

    <h4>stable</h4>
    <div class="x stable">
        <p>...没想到《CSS新世界》...</p>
    <div class="x stable">
        <p>...没想到《CSS新世界》...</p>
        <img src="0.jpg">
    

    此时,就可以看到如下图所示的效果了,就算没有出现滚动条,容器右侧的空间也会提前占据好,这样内容再次出现,布局结构就会稳定,就不会出现晃动:

    both-edges 可以让两侧都提前占好滚动条的位置,示意 HTML 代码:

    <h4>stable both-edges</h4>
    <div class="x both-edges">
        <p>...没想到《CSS新世界》...</p>
    <div class="x both-edges">
        <p>...没想到《CSS新世界》...</p>
        <img src="0.jpg">
    

    最终的渲染布局效果:

    眼见为实,您可以狠狠地点击这里:CSS scrollbar-gutter基本效果demo

    注意:MacOS操作系统滚动条本身就不占据宽度,因此无效,本demo需要在Windows操作系统下体验

    实际开发,我们往往会用在根元素上:

    :root {
        scrollbar-gutter: stable;
    

    scrollbar-gutter 虽然是一个源自实际用户体验的 CSS 特性,还比较实用,但是目前的兼容性还不是很好,Chrome 94+ 浏览器支持:

    不过,这一点也不影响我们在实际项目中使用,毕竟 Chrome 及其内核浏览器目前桌面端浏览器占比高于 90%,本身也是个渐进增强的属性,浏览器支持棒棒哒,浏览器不支持,也只是还是以前的默认体验而已。

    三、结束语

    刚刚看规范文档,又发现了个与 overflow 相关的新的 CSS 属性,overflow-clip-margin 可以设置 overflow 剪裁的盒子和范围,看起来也很实用,Chrome 90+ 支持,下次可以介绍下。

    Ok,好本文内容就这么多。

    带大家先温故了下 scrollbar-colorscrollbar-width这两个CSS属性,再详细介绍了下 scrollbar-gutter 属性,希望本文的内容能够帮到大家的学习。

    如果您觉得本文内容还不错,欢迎 ,比心~

    (本篇完)

    2023年08月7日 09:19

    用了 scrollbar-gutter 之后有个问题,怎么设置他的背景色呢,根本不受控制。另外如果 header 导航想通过 fixed 顶出去也是没用的,虽然用了,感觉还是有点尴尬。

    2024年01月10日 15:47

    如设置了::-webkit-scrollbar的width宽度,MacOS Chrome 下设置了scrollbar-gutter: stable;的滚动条就会占用滚动条的宽度

    测试了下,scrollbar-color 在 firefox 上无效,版本 95
    scrollbar-gutter 在 chrome 上无效,版本 97
    肿么回事呢,试了下您的 demo 也不行

    张鑫旭 ,09年 华中科技大学 毕业,现 上海 ,就职于 阅文集团 ,专注 web前端 偏前领域,著有 《CSS世界》 《CSS选择器世界》 《CSS新世界》

    邮箱: [email protected]

    关注我: 微信 微博 掘金 知乎 头条 B站 Gitee

  • ES6 JavaScript Promise的感性认知 (153)
  • 让IE6/IE7/IE8浏览器支持CSS3属性 (139)
  • JS获取上一访问页面URL地址document.referrer实践 (135)
  • 关于文字内容溢出用点点点(...)省略号表示 (134)
  • 以20像素为基准的CSS网页布局实践分享 (134)
  • jQuery html5Validate基于HTML5表单验证插件 (122)
  • jQuery powerFloat万能浮动层下拉层插件 (120)
  • 如何使用Tween.js各类原生动画运动缓动算法 (118)
  • css行高line-height的一些深入理解及应用 (104)
  • 今年热议

  •