☰

Есть ли способ отключить пользовательские полосы прокрутки 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

Откройте исполняемый файл вашего веб-браузера в двоичном текстовом редакторе или шестнадцатеричном редакторе и замените все вхождения "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--);
        }
    }
});

Связанный контент