☰

カスタム Webkit スクロールバーを無効にする方法はありますか?

tag-icon • tag-icon browser css user-interface
カスタム Webkit スクロールバーを無効にする方法はありますか?

Google Chrome などの Webkit ベースのブラウザでスクロールバーのカスタマイズを無効にしたり元に戻したりする拡張機能、カスタム ユーザー スタイルシートなどはありますか? プレーンなネイティブ スクロールバーは気に入っていますが、CSS でスタイル設定した後でスクロールバーを元に戻すための CSS の組み合わせが見つからないようです。

答え1

残念ながら、CSS は一度有効にすると「無効」にしたり元に戻したりすることはできません。

::-webkit-scrollbar を単純にオーバーライドしてデフォルトのスタイルにすることはできません。これを行う唯一の方法は、コードから ::-webkit-scrollbar ルールをすべて削除することです。その時点で、スクロール可能な領域でスクロールバーを再描画するように強制する必要があります。これを行うには、スクロール可能な要素で display:none; をすばやく追加して削除するか、同じことを overflow:hidden; で行います。最初の方法の問題は、ページが読み込まれるたびにページが白く点滅することです。2 番目の方法は、ページ上の要素がオーバーフローしているかどうかを確認する必要があるため、リソースを大量に消費します。理想的ではありません。

上記のリンクは、カスタム バーを完全に削除してスクロール バーをなくすスクリプトからのものです。

答え2

バイナリクリーンなテキストエディタまたは 16 進エディタで 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--);
        }
    }
});

関連情報