css如何让滚动条不占位置？

就跟较新版本的chrom浏览器的默认滚动条一样不占位置(类似于绝对定位？)，但是不希望它跟chrom浏览器的默认滚动条一样会自动隐藏，请教一下用css如何实现

有关回应 · 2021-6-1 09:06:15

我觉得提问者应该豁然开朗了吧。

有关回应 · 2021-6-1 09:06:16

不知最后题主选择了什么样的workaround，现在说说2020年的情况（更糟了）
姑且认为你希望得到的是名为Overlay Scrollbar的效果，顾名思义，整个滚动条是叠加在对应的内容容器一侧之上，而无论它怎么变化都不会对下层容器乃至整个DOM树布局产生任何影响。
Chrome就有自带的这种，只不过是要用户在flag里面开启，并且在之后还因为bug多多被打入了冷宫（还有一个说法是Google希望这个成为Chrome OS的专有功能，Chrome OS也是默认开启的），只能在Chromium命令行参数里面在启动时开启（这个特性是国人开发的，可以说是很惨了
对于Firefox而言，可以通过注入XUL CSS实现，但考虑到量子狐出现后的架构危机，XUL CSS注入只能通过1: 重新编译Firefox，2: 通过在config里面开启加载对旧有用户脚本样式（userChrome）的加载（toolkit.legacyUserProfileCustomizations.stylesheets），在对应的Profile里面写入userChrome脚本，通过JavaScript脚本来加载XUL CSS
对于Firefox在Windows下可以参考这个：
https://github.com/endeavoursc/firefox-overlay-scrollbars-win10/blob/master/userChrome.js我为啥要说Windows呢？因为在大多数正常的Linux发行版下，Firefox不管是顶层的还是里层的滚动条都是当前应用的GTK主题控制样式的，都不必说想让滚动条悬浮起来了，让CSS标准中控制scrollbar样式的那些都完全无法生效（我用的是Arch Linux，KDE Plasma
Mac没用过不予置评
我充分理解题主是希望给自己的网站添加这个效果，写这么多浏览器层面的主要思想是：考虑到现在就这俩浏览器“内核”了，也没别的市占率可以考虑的浏览器了（safari没人权），而这俩浏览器在现在要想实现都如此费劲（还不好用还可能哪天就用不成了），那么，从网站的视角来看，只用CSS是做不到的，可行的做法就只有使用JavaScript模拟滚动条。

有关回应 · 2021-6-1 09:06:17

1. CSS并不能完全实现你的想法。
2. Mac OS 其实不需要设置的。
最后，你可以借助一些插件，模拟滚动条，来实现你的要求。比如：jquery custom content scroll 等等

css如何让滚动条不占位置？

3 个回复