Hide Scrollbar in Edge, IE 10/11

You can make it auto-hiding instead of always-showing:

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

Turns out like this:

Credit to Thierry Koblentz for digging this gem out of Jon Neal's Sanitize.css.

Comments

  1. User Avatar
    Pat
    Permalink to comment#

    Hide scrollbar in Edge? I wish it would show for once. It keeps disappearing and it’s impossible to close certain windows on the page without scrolling up to the top to get to the top right x of the window. I have to try and guess where the invisible scrollbar in the browser is and try clicking everywhere close to the right hand side of the browser and it takes many, many clicks before it suddenly become visible and then only briefly: if I accidentally click below the scrollbar it will disappear again with as many efforts to get it to come up again. Not cool at all.

  2. User Avatar
    Pat
    Permalink to comment#

    For further information this happens particularly when playing the Plarium Sparta War of Empires game. Games use more resources of course but does this browser’s scrollbar take so many resources that it competes with a game? I don’t have the same problem in Chrome.

  3. User Avatar
    Kate
    Permalink to comment#

    This does fix, but should not be used in production. See the MDN Docs for reference.

  4. User Avatar
    Steve Hull
    Permalink to comment#

    @kate I’d argue this is great for production. It makes Edge/IE behave the same way as OSX (that is, auto-hiding scrollbars) such that you get more screen real estate and simplifies things if you are doing width calculations in javascript (that is, making scrollWidth == clientWidth). There’s a reason this is included in sanitize.css.

  5. User Avatar
    Alex
    Permalink to comment#

    Weirdly -ms-autohiding-scrollbar causes the width I set with -webkit-scrollbar to work in IE 11, but only when the mouse is still. As soon as the mouse is moved it reverts to the really thick, clunky scrollbar as usual.

  6. User Avatar
    Simon Aspinall
    Permalink to comment#

    Is there a way to reduce the amount of time before the scrollbar is hidden? i.e. time in ms or when the cursor leaves the element?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag