☰

Existe uma maneira de desativar as barras de rolagem personalizadas do webkit?

tag-icon • tag-icon browser css user-interface
Existe uma maneira de desativar as barras de rolagem personalizadas do webkit?

Existe uma extensão, folha de estilo de usuário personalizada, etc. que desativará ou reverterá a personalização de barras de rolagem em navegadores baseados em Webkit, como o Google Chrome? Gosto das barras de rolagem simples e nativas, mas não consigo encontrar uma combinação de CSS para fazê-las voltar depois de estilizadas por CSS.

Responder1

Infelizmente, o CSS não pode ser "desativado" ou revertido depois de ativado:

::-webkit-scrollbar não pode ser simplesmente substituído para obter o estilo padrão, a única maneira de fazer isso é remover todas as regras ::-webkit-scrollbar do código. Nesse ponto, as áreas roláveis ​​devem ser forçadas a redesenhar as barras de rolagem. Para fazer isso você adiciona e remove rapidamente display:none; from ou faça a mesma coisa com overflow:hidden; em elementos roláveis. O problema com o primeiro é que a página pisca em branco a cada carregamento de página; o segundo consome muitos recursos, pois seria necessário verificar se algum elemento da página está transbordando - o que não é o ideal.

O link acima vem de um script que removerá completamente as barras personalizadas, deixando você sem barra de rolagem.

Responder2

Abra o executável do seu navegador da web em um editor de texto binário limpo ou editor hexadecimal e substitua todas as ocorrências de "webkit-scrollbar" por algum outro lixo como "webkit-scrollb4r". Acabei de tentar isso com o Chrome e resolve o problema.

Responder3

Peguei a resposta do @bumfo e resolvi esse problema de segurança no Chrome:https://stackoverflow.com/questions/49161159/uncaught-domexception-failed-to-read-the-rules-property-from-cssstylesheet

Se você colar isso no seu console, você receberá as barras de rolagem de volta:

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);
    }
};

Aqui está uma extensão do Chrome com isso:https://chrome.google.com/webstore/detail/default-scrollbar/nkjmoagfbmeafonfhbkeicjdhjlofplo

E seu repositório no github:https://github.com/ubershmekel/default-scrollbar

Responder4

Nota: esta resposta foi testada pela última vez em 2015 e pode não funcionar em ambientes mais recentes.

O código abaixo é um script de usuário que remove todas as correspondências de regras 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--);
        }
    }
});

informação relacionada