☰

¿Hay alguna forma de desactivar las barras de desplazamiento personalizadas de webkit?

tag-icon • tag-icon browser css user-interface
¿Hay alguna forma de desactivar las barras de desplazamiento personalizadas de webkit?

¿Existe alguna extensión, hoja de estilo de usuario personalizada, etc. que deshabilite o revierta la personalización de las barras de desplazamiento en navegadores basados ​​en Webkit como Google Chrome? Me gustan las barras de desplazamiento nativas y sencillas, pero parece que no puedo encontrar una combinación de CSS para hacer que vuelvan a aparecer una vez que CSS les ha aplicado el estilo.

Respuesta1

Lamentablemente, el CSS no se puede "deshabilitar" ni revertir una vez activado:

::-webkit-scrollbar no se puede simplemente anular para obtener el estilo predeterminado, la única forma de hacerlo es eliminar todas las reglas ::-webkit-scrollbar del código. En ese punto, las áreas desplazables deben verse forzadas a volver a dibujar las barras de desplazamiento. Para hacerlo, puede agregar y eliminar rápidamente display:none; desde o hacer lo mismo con overflow:hidden; en elementos desplazables. El problema con el primero es que la página parpadea en blanco cada vez que se carga; el segundo requiere muchos recursos, ya que tendría que comprobar si algún elemento de la página se desborda; no es lo ideal.

El enlace de arriba proviene de un script que eliminará las barras personalizadas por completo, dejándolo sin barra de desplazamiento.

Respuesta2

Abra el ejecutable de su navegador web en un editor de texto binario limpio o en un editor hexadecimal, y reemplace todas las apariciones de "webkit-scrollbar" con alguna otra basura como "webkit-scrollb4r". Intenté esto con Chrome y resuelve el problema.

Respuesta3

Tomé la respuesta de @bumfo y solucioné este problema de seguridad en Chrome:https://stackoverflow.com/questions/49161159/uncaught-domexception-failed-to-read-the-rules-property-from-cssstylesheet

Si pegas esto en tu consola, recuperarás las barras de desplazamiento:

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

Aquí hay una extensión de Chrome con esto:https://chrome.google.com/webstore/detail/default-scrollbar/nkjmoagfbmeafonfhbkeicjdhjlofplo

Y su repositorio de github:https://github.com/ubershmekel/default-scrollbar

Respuesta4

Nota: esta respuesta se probó por última vez en 2015 y es posible que no funcione en entornos más nuevos.

El siguiente código es un script de usuario que elimina todas las coincidencias de reglas 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--);
        }
    }
});

información relacionada