Is there a way to disable custom webkit scrollbars?

Question

Is there an extension, custom user stylesheet, etc. that will disable or revert the customization of scrollbars in Webkit based browsers like Google Chrome? I like the plain, native scrollbars but I cannot seem to find a combination of CSS to make them come back once they have been styled by CSS.

Answer 1

Unfortunately, the CSS cannot be "disabled" or reverted once activated:

::-webkit-scrollbar cannot be simply overridden to get the default style, the only way to do it is to remove all ::-webkit-scrollbar rules from the code. At that point, scrollable areas have to be forced to redraw the scrollbars. To do that you either quickly add and remove display:none; from or do the same thing with overflow:hidden; on scrollable elements. The problem with the first one is that the page flashes white at every page load; the second one is resource-intensive as it would have to whether check any element on the page overflows—not ideal.

The link above is from a script that will remove the custom bars completely, leaving you with no scroll bar.

Answer 2

I took @bumfo's answer, and fixed this security issue on chrome: https://stackoverflow.com/questions/49161159/uncaught-domexception-failed-to-read-the-rules-property-from-cssstylesheet

If you paste this in your console, you'll get your scroll bars back:

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

Here's a chrome extension with this: https://chrome.google.com/webstore/detail/default-scrollbar/nkjmoagfbmeafonfhbkeicjdhjlofplo

And its github repo: https://github.com/ubershmekel/default-scrollbar

Answer 3

Open your web browser executable in a binary-clean text editor or hex editor, and replace all occurrences of "webkit-scrollbar" with some other junk like "webkit-scrollb4r". I just tried this with Chrome and it solves the problem.

Answer 4

As discussed here, it does not seem feasible to reset Chrome scrollbars with CSS, but you can always override them.

/* Adjust as desired */

*::-webkit-scrollbar {
    all: initial !important;
    width: 15px !important;
    background: #d8d8d8 !important;
}
*::-webkit-scrollbar-thumb {
    all: initial !important;
    background: #7c7c7c !important;
}

*::-webkit-scrollbar-button { all: initial !important; }
*::-webkit-scrollbar-track { all: initial !important; }
*::-webkit-scrollbar-track-piece { all: initial !important; }
*::-webkit-scrollbar-corner { all: initial !important; }
*::-webkit-resizer { all: initial !important; }

Answer 5

Note: this answer is last tested in 2015, may not work in newer environments.

The code below is a user script that removes every css rule matching ::-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--);
        }
    }
});