☰

有沒有辦法停用自訂 webkit 捲軸？

tag-icon • tag-icon browser css user-interface
有沒有辦法停用自訂 webkit 捲軸？

是否有擴充功能、自訂使用者樣式表等可以停用或恢復基於 Webkit 的瀏覽器（如 Google Chrome）中捲軸的自訂？我喜歡簡單的、原生的滾動條，但我似乎無法找到 CSS 的組合來讓它們在被 CSS 樣式化後返回。

答案1

不幸的是，CSS 一旦啟動就無法「停用」或恢復：

::-webkit-scrollbar 不能簡單地覆蓋以獲取預設樣式，唯一的方法是從程式碼中刪除所有 ::-webkit-scrollbar 規則。此時，必須強制可滾動區域重新繪製捲軸。為此，您可以快速新增和刪除 display:none; from 或使用 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 儲存庫：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--);
        }
    }
});

相關內容