请问新版chrome如何隐藏滚动条轨道呢

secret

在之前版本我使用css样式来自定义滚动条
更新测试版后发现114版开始overflow: overlay不再可用
并且scrollbar-track无法强制变为透明

想请教之后的版本该如何隐藏滚动条轨道呢



另外想问一下有没有不通过js仅使用css达到滚动条「只在滚动时显示、在非滚动时隐藏」的效果

大大神

https://chromewebstore.google.co ... ajcjcihnbdklglboald

secret

Overlay was NOT part of official CSS specification. I was supported only by webkit engine, was later deprecated and eventually REMOVED. Currently overflow: overlay acts as auto so it should NOT be used.

According to Can I Use, current support is only 8%, and will be decreasing.

Now correct answer will be - it is not possible to achieve this effect with pure CSS, because there is no such properties for overflow or webkit-scrollbar.

If someone really needs that - JS must me involved. Of course there are ready to use libraries like Simplebar.

原本一行css就能实现的现在需要库或者插件来解决了
美美推广一波自家扩展商店
不知道百分会考虑继续支持吗 还是实现起来很麻烦呢

S8F8ry

没办法，"overflow: overlay" 始终没有进规范，谷歌就砍掉了。虽然 chrome://flags/#overlay-scrollbars 现在有在更新完善，但在百分目前用的 118 内核上会大概率出现滚动条图层渲染不出来的情况。

coult3

如果只用css的话，下面的代码勉强做到（stylus扩展里，编写新样式，应用到所有页面）：

1. ::-webkit-scrollbar {
   
2.   width: 10px;
   
3.   height: 10px;
   
4. }
   
5. 
   
6. ::-webkit-scrollbar-thumb {
   
7.   background: #888;
   
8.   visibility: hidden;
   
9. }
   
10. 
    
11. ::-webkit-scrollbar-thumb:hover {
    
12.   visibility: visible;
    
13. }

复制代码

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

缺点是只有鼠标移动到 滚动滑块 上，滚动滑块才会显示，如果鼠标移动到 滚动条没有滑块的轨道部分，滚动滑块就不显示了。

如果用js，参考：
https://kingsora.github.io/OverlayScrollbars/

secret

coult3 发表于 2024-4-11 18:11
如果只用css的话，下面的代码勉强做到（stylus扩展里，编写新样式，应用到所有页面）：
https://developer. ...

感谢 虽然没有成功但学习了
我需求效果是滚动条叠加在页面内容上方 但114后会阻止内容扩展到滚动条边线内
即滚动条不能与页面内容叠加了[类似1920px+0px→1908px+12px的感觉]
因而类似的插件扩展也都全部失效
根据我3楼的引用目前可能只能以JS的方式达成