在 Chrome 78 启用 overlay-scrollbars

2021-6-24 Chrome 91 中已重新加回 overlay-scrollbars。chrome://flags/#overlay-scrollbars

Chrome 的 Overlay Scrollbars(重叠式滚动条)我已用了好几年了。小小的透明灰条替代了原本占据一定宽度的粗滚动条,让视野干净不少,也消除了同一网站下网页切换时滚动条出现/消失时带来的页面抖动。

然而在 Chrome 78 中,这个滚动条的开关在 chrome://flags 页面消失了。之前若是已启用 Overlay Scrollbars,仍可以继续使用该特性。但如果碰上浏览器重装或是新装,就找不到这个功能的开关了。

好在这个功能的相关代码仍未被去除,该 flag 似乎只是“过期”了。因此研究了下 chrome://flags 页面,找出了在 Chrome 78 下启用 Overlay Scrollbars 的方法:

  1. 打开 chrome://flags 页面
  2. F12 打开开发者工具,并切换到 Console 页面
  3. 输入 chrome.send('enableExperimentalFeature', ['overlay-scrollbars@1', 'true']); 并按 Enter
  4. 重启浏览器

该方法目前在最新的 Chrome Canary 80 下同样有效,但 Overlay Scrollbars 相关代码在未来是否会被删除,或是是否会继续开发,就不得而知了。

该方法在 Chrome Beta 79 & Chrome Canary 80 下均已失效,查看讨论。 查看 Commit 历史后,发现该 flag 是在 commit 6311d9a 中被禁用的。

值得一提的是,Overlay Scrollbars 在 Chrome OS 下是默认启用的,因此 Chromium 的代码库中仍存在重叠式滚动条的相关代码。虽然目前仍有较复杂的方法再次启用该功能,但我强烈建议对该功能有需求的用户,在 reddit 以及 crbug 反馈该问题,要求 Google 加回并继续维护 Windows 平台下的该功能。

一些吐槽

Chrome 市占率垄断之后越来越不考虑老用户的感受,很多用户仍有需求的功能想砍就砍,例如网页编码选择、blocking webRequest API(用于广告屏蔽)。

换浏览器?然而 Firefox 在 Windows 下的体验也很糟糕,Firefox 的高精度触摸板、触摸屏支持比起 Edge 与 Chrome 要差很多。此外,微软现在也加入了 Chromium 的开发,未来 Firefox 与 Chrome 在 Windows 下的体验差距很可能只会越来越大。

Coxxs

本文由 Coxxs 原创,转载须注明原文链接:https://dev.moe/1413

在 Chrome 78 启用 overlay-scrollbars》有10个想法

    1. 这需要网站站长来实现,而且这种滚动条我没记错的话,和默认的一样,会占用页面宽度。

    2. 前端开发路过 windows平台不管怎么改都是始终显示 并且::-webkit-scrollbar实际使用感觉是阉割过的css,很多attribute并不支持,体感类似读了css再根据指定的那些个attribute改动系统自带scrollbar样式..

  1. 虽然自己用起来很方便,但是在网页开发的时候却偏偏不能这么做。。因为不是所有的用户都会启用这个功能(

    1. Chrome OS 下我记得是默认启用这个功能的,所以如果真的要开发网页,需要把这个功能打开再做测试,才能兼顾所有用户。

  2. 大佬您好,今天11/30,版本号78.0.3904.108,我想开启这个功能功能,发现第一次进入flag页面是有这个选项,重启之后就根本找不到overlay-scrollerbar这个条目了,而您的方法似乎已经失效了,在flag页面的f12输入代码之后返回undefined,能麻烦您再研究一下吗

  3. Chrome 79 里,地址栏的 www 又消失了。
    通过参数 –disable-features=OmniboxUIExperimentHideSteadyStateUrlScheme,OmniboxUIExperimentHideSteadyStateUrlTrivialSubdomains 依然可以取消隐藏。
    这是不是也和本文说的一样,只是 flag 里的 omnibox 相关条目过期了、但代码里相关部分未删除、依然可用?

  4. 一搜索就搜进来了。测试还能靠 –enable-features=OverlayScrollbar 顶着用,不知道能用多久。真的是逼着你走。我记得这个功能还是某位国人参与开发的。

  5. 页面抖动可以用width: 100vw去除吧,vw不受滚动条的影响

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注