☰

有没有办法禁用自定义 webkit 滚动条？

tag-icon • tag-icon browser css user-interface
有没有办法禁用自定义 webkit 滚动条？

是否有扩展程序、自定义用户样式表等可以禁用或恢复基于 Webkit 的浏览器（如 Google Chrome）中滚动条的自定义？我喜欢简单的原生滚动条，但似乎找不到 CSS 组合来让它们在经过 CSS 样式化后恢复。

答案1

不幸的是，CSS 一旦激活就无法被“禁用”或恢复：

::-webkit-scrollbar 不能简单地被覆盖以获取默认样式，唯一的方法是从代码中删除所有 ::-webkit-scrollbar 规则。此时，必须强制可滚动区域重新绘制滚动条。为此，您可以快速添加和删除 display:none; 或对可滚动元素使用 overflow:hidden; 执行相同操作。第一种方法的问题是，每次加载页面时页面都会闪烁白色；第二种方法占用大量资源，因为它必须检查页面上的任何元素是否溢出——这并不理想。

上面的链接来自一个脚本，它将完全删除自定义栏，使之不再有滚动条。

答案2

在二进制干净的文本编辑器或十六进制编辑器中打开您的 Web 浏览器可执行文件，并将所有出现的“webkit-scrollbar”替换为其他垃圾，例如“webkit-scrollb4r”。我刚刚在 Chrome 上尝试了这个方法，它解决了这个问题。

答案3

我采纳了@bumfo 的回答，并修复了 chrome 上的这个安全问题：https://stackoverflow.com/questions/49161159/uncaught-domexception-failed-to-read-the-rules-property-from-cssstylesheet

如果你将其粘贴到控制台中，你就会恢复滚动条：

for (var sheetI = 0; sheetI < document.styleSheets.length; ++sheetI) {
    var sheet = document.styleSheets[sheetI];
    try {
        var ruleSet = sheet.rules || sheet.cssRules;
        for (var i = 0; i < ruleSet.length; ++i) {
            var rule = ruleSet[i];
            if (/scrollbar/.test(rule.selectorText)) {
                sheet.deleteRule(i--);
            }
        }
    } catch (e) {
        console.warn("Can't read the css rules of: " + sheet.href, e);
    }
};

这是一个带有此功能的 Chrome 扩展程序：https://chrome.google.com/webstore/detail/default-scrollbar/nkjmoagfbmeafonfhbkeicjdhjlofplo

它的 github repo 如下：https://github.com/ubershmekel/default-scrollbar

答案4

注意：此答案最后一次测试是在 2015 年，可能不适用于较新的环境。

下面的代码是删除每个匹配的 CSS 规则的用户脚本::-webkit-scrollbar。

// ==UserScript==
// @name         My Fancy Scrollbar Userscript
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

[].forEach.call(document.styleSheets, function(sheet) {
    for (var i = 0; i < sheet.rules.length; ++i) {
        var rule = sheet.rules[i];
        if (/::-webkit-scrollbar/.test(rule.selectorText)) {
            sheet.deleteRule(i--);
        }
    }
});

相关内容