允许以下两个配置即可：
chrome://flags/#fluent-scrollbars
chrome://flags/#fluent-overlay-scrollbars
3 个赞
什么效果？
似乎我的 EDGE 默认就是这样的
版本 124.0.6367.62（正式版本） (arm64) 没有这俩设置项
赞，设置后滚动条像火狐的一样不会占用网页空间。
Edge 好像没有第二个选项？
可能是版本低了，升级到最新版看看
感谢，已开
提醒：如果不开fluent-overlay-scrollbars，滚动有卡顿的感觉
这样设置完有个“小问题”，没有滚动操作一段时间后，滚动条会自动隐藏
如果介意的话，同时有自定义滚动条需求的也可以通过改 css 实现类似的效果，虽然会占据一定的横向宽度（好像在 Mac 上不占据宽度），不过好在可以自定义宽度及颜色
- 方法一：stylus 扩展填入 css
/* ↓↓↓滚动条↓↓↓ */
:root {
/* 为左侧添加滚动条宽度，让页面内容保持居中 */
/* scrollbar-gutter: stable both-edges !important; */
}
/* 滚动条 */
::-webkit-scrollbar {
/* 滑轨背景色 */
background: transparent !important;
/* 滑块和滑轨宽度 */
width: 10px !important;
}
::-webkit-scrollbar:hover {
/* width: 20px !important; */
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
/* 高度 */
/* height: 200px; */
/* 圆角半径 */
border-radius: 10px !important;
/* 透明边框 */
border: 2px solid transparent;
background-clip: content-box;
/* 纯色背景 */
background-color: #808080bd;
/* 彩虹渐变背景 */
/* background-image: linear-gradient(45deg, #bf616a, #d08770, #ebcb8b, #a3be8c, #88c0d0, #5e81ac, #ad9ed4) !important; */
}
/* 鼠标指针悬停在滑块时滑块的样式 */
/* ::-webkit-scrollbar-thumb:hover {
background: red !important;
} */
/* 滑轨 */
::-webkit-scrollbar-track {
background: transparent !important;
}
/* 滑块未覆盖的滑轨 */
::-webkit-scrollbar-track-piece {
background: transparent;
}
/* 首尾三角箭头按钮 */
::-webkit-scrollbar-button {
background: transparent !important;
display: none !important;
}
/* 右下角横向与竖向滚动条的相交处 */
::-webkit-scrollbar-corner {
background: transparent !important;
}
/* ↑↑↑滚动条↑↑↑ */
- 方法二：油猴脚本
// ==UserScript==
// @name 自定义滚动条
// @namespace http://tampermonkey.net/
// @description 自定义滚动条样式
// @author You
// @match *://*/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
GM_addStyle(`
/* ↓↓↓滚动条↓↓↓ */
:root {
/* 为左侧添加滚动条宽度，让页面内容保持居中 */
/* scrollbar-gutter: stable both-edges !important; */
}
/* 滚动条 */
::-webkit-scrollbar {
/* 滑轨背景色 */
background: transparent !important;
/* 滑块和滑轨宽度 */
width: 10px !important;
}
::-webkit-scrollbar:hover {
/* width: 20px !important; */
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
/* 高度 */
/* height: 200px; */
/* 圆角半径 */
border-radius: 10px !important;
/* 透明边框 */
border: 2px solid transparent;
background-clip: content-box;
/* 纯色背景 */
background-color: #808080bd;
/* 彩虹渐变背景 */
/* background-image: linear-gradient(45deg, #bf616a, #d08770, #ebcb8b, #a3be8c, #88c0d0, #5e81ac, #ad9ed4) !important; */
}
/* 鼠标指针悬停在滑块时滑块的样式 */
/* ::-webkit-scrollbar-thumb:hover {
background: red !important;
} */
/* 滑轨 */
::-webkit-scrollbar-track {
background: transparent !important;
}
/* 滑块未覆盖的滑轨 */
::-webkit-scrollbar-track-piece {
background: transparent;
}
/* 首尾三角箭头按钮 */
::-webkit-scrollbar-button {
background: transparent !important;
display: none !important;
}
/* 右下角横向与竖向滚动条的相交处 */
::-webkit-scrollbar-corner {
background: transparent !important;
}
/* ↑↑↑滚动条↑↑↑ */
`)
})();
由于各浏览器及不同版本对这些 css 属性的兼容性不一，只测试 Chrome ，详见 https://developer.mozilla.org/ 属性页面底部的表格
纯色：
彩虹渐变：
新增了透明边框
尝试加 css 动画但对滚动条无效，通过 js 实现的话找到一个库 GitHub - MinJieLiu/mac-scrollbar: Scrollbar React component with macOS style. 但根据 issue 反馈 Chrome 121+ 可能已经失效
可以试试把dark reader插件关了再看。dark reader可能会覆盖滚动条样式 如果是这样，在它的设置里把scrollbar设为默认就行
解决了，多谢。这里贴一个 dark reader 关闭滚动条修改的方法
不过试了一下，Edge开启后貌似没用
