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.

  • 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


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.

  • 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

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


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
    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

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

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .