Hide Scrollbars Using Javascript

One issue I came across while doing one of my projects was to hide the scrollbars of a popup window. Yeah, sure, it is easy if you add the attribute scrollbars=no inside the window.open()‘s window attributes. But what if you wish to hide them when the popup window is already open. Thank you CSS! Yes, it is possible by using Javascript and accessing the window style’s property overflow. However, there is a cross-browser issue. Both IE and Firefox/Google Chrome have different codes that make this work. You can place both their codes in the same page and/or Javascript function. If the browser does not understand the property, it will ignore it anyway so there is no need to do a browser check to execute the code specific to that certain browser.

The code below does the trick

Just in case you wish to disable either just the horizontal or vertical scrollbar, this code works for non IE browsers

Related Posts Plugin for WordPress, Blogger...

tags: ,

  1. 12 Responses to “Hide Scrollbars Using Javascript”

  2. Hi,
    my name is Malte Newman, I am a developer. I had a 3 days issue and your code solved the problem. I just want to say “thank you” for providing the code. How could you find out this?

    I am loading several CSS backgrounds with an asp file in, and no matter I tried, I had always a horizontal scrollbar and a white empty space on the right side of the screen. So I tried to eliminate the hor scrollbar with code like:
    >window.document.body.style.overflow = ‘hidden'; and I added to all >divs< the ‘overflow’ but none of them worked – 3 days.
    So I just wonna say “thank you”.

    Best regards,
    Malte Newman

    By Newman on Jan 29, 2009

  3. your code has a window. in it, are you doing that to a popup window? because if not, then that should not work because of the window.

    By tech on Jan 29, 2009

  4. Thanks a lot dude for such a useful tip//

    By nishant on Dec 19, 2009

  5. Very useful, thanks. I set it up so that it hides the scrollbar until everything is loaded and then is shows the scrollbar.

    It worked great in Firefox and IE and does indeed hide the scrollbar in Safari, but doesn’t bring it back once everything is loaded in Safari. Any ideas? I’m using the $(window)load function to bring it back once everything is loaded… Thanks!

    By Luke on Mar 13, 2010

  6. diss safari man … it sucks lol

    By tech on Mar 13, 2010

  7. Thanks man, it works for Google Chrome~!

    By ico on Jan 6, 2011

  8. If you hide the overflow (better way using CSS → overflow:hidden;) you don’t hide the scrollbars.
    You hide every content of the element that is too long.

    So not a good way…(?)

    By Julian on Jan 12, 2012

  9. Nice,
    thank u very much. I got what i was searching from couple of days…:)

    By Himanshu Jani on Mar 6, 2012

  10. Thanks for the tip!

    By New Venture Websites on Oct 18, 2012

  11. Where you put these line of code. I have my JS function where I have window.open().
    then where should I put this code ?

    By Vijay on May 10, 2013

  12. @vijay: you can put that outside the functions, just between

    By blogmeister on May 10, 2013

  13. Perfect, thanks for the tip!

    By Saxon on Jan 14, 2015

Post a Comment