18

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.

2
  • The webkit-scrollbar occurrences can be found in chrome_child.dll in later versions.
    – user293252
    Jan 25, 2014 at 17:29
  • replicate the native scrollbar in css, then inject that stylesheet using a extension.
    – Sarim
    Oct 7, 2014 at 7:28

5 Answers 5

4

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.

1
  • If they are still scrollable areas, wouldn't it render a regular scrollbar? Embedded iframes get scrollbars, so I figured the same would be true for other things that overflow. I mean, I'd expect something like backbonejs.org with its #sidebar div. Mar 22, 2013 at 5:54
2

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.

2
  • 2
    Is modifying a compiled executable really safe? Wouldn't it be better to download Chromium source, modify it and compile it?
    – Oriol
    Jan 25, 2014 at 18:11
  • 1
    This would invalidate any digital signatures of the chrome.exe build, fwiw - so you may get scary warnings every time you try to open Chrome.
    – Dai
    Jun 22, 2017 at 1:01
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

0

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

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--);
        }
    }
});
1
  • Please provide an explanation of what this is. What would you do with this code?
    – Starfish
    Mar 5 at 20:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.