为 Firefox 系浏览器在论坛显示滚动条

Web 论坛相关Firefox滚动条CSS
浏览数 - 431发布于 - 2025-03-02 - 15:16
zako
zako

1130

咱是一个 Firefox 系浏览器的忠实用户
但是在论坛浏览时候发现 Firefox 的滚动条消失,在浏览网页的时候鼠标滚轮要冒烟惹
鼠标中键又不大好用的说
而在 Chromium 测试却没有问题

如图:

Firefox:zako-1740927632756-firefoxesrpng Chromium:zako-1740927660090-ungoogledchromiumpng

前端 fw 用 F12 大法测试发现是inline style sheet #1scrollbar-width:none导致

80  @-moz-document url-prefix() {
81   * {
82      scrollbar-width:none
83    }
84  }


(@-moz-document是 Firefox 特有的设置项故 Chromium 系不受此配置项影响 )

参见 MDN

使用咱100年没有碰过的油猴脚本添加样式就可以召唤 Firefox 的滚动条惹

// ==UserScript==
// @name         显示 Firefox 在kungal的滚动条
// @namespace    https://tampermonkey.net/
// @version      1.0
// @author       zako
// @match        https://www.kungal.com/*
// @grant        GM_addStyle
// @license      null
// @run-at       document_end
// ==/UserScript==
(function() {
    'use strict';

    const css = `
* {
    scrollbar-color: blue transparent;
    scrollbar-width: thin;
}
body {
    background-color: var(--kungalgame-blue-0);
}
    `;

    if (typeof GM_addStyle !== "undefined") {
        GM_addStyle(css);
    } else {
        let styleNode = document.createElement("style");
        styleNode.textContent = css;
        document.head.appendChild(styleNode);
    }
})();

假如你也使用 Stylus 之类自定义网页样式的扩展
则只需要为域名www.kungal.com新建样式

* {
    scrollbar-color: blue transparent;
    scrollbar-width: thin;
}
body {
    background-color: var(--kungalgame-blue-0);
}

这段会让滚动条更接近在 Chromium 系显示的滚动条样式(不加入情况下滚动条轨道底色是纯白(轨道颜色是透明但是透明的底下是纯白))

body {
    background-color: var(--kungalgame-blue-0);
}


感谢 SaltedFishes 的建议

重新编辑于 - 2025-03-04 - 18:24

鲲

5209

#1

呜呜呜呜呜呜!!!知错了,这个以前有人提到过,下个版本会修,不过下个版本要的时间可能会比较长一些

2025-03-02 - 15:21

评论

zako
zako评论

鲲敲代码辛苦惹(

鲲
评论zako

没事的没事的,咕咕咕咕咕

#2
2025-03-03 - 12:21 (已编辑于 2025-03-03 - 13:25)
kohaku