Disable browsers vertical and horizontal scrollbars

Question

Is it possible to disable the browsers vertical and horizontal scrollbars using jQuery or javascript

User · Answer

function reloadScrollBars         document documentElement style overflow    auto       firefox  chrome     document body scroll    yes      ie only    function unloadScrollBars         document documentElement style overflow    hidden       firefox  chrome     document body scroll    no      ie only

User · Answer

Try CSS   lt body style  overflow  hidden  gt

User · Answer

Using JQuery you can disable scrolling bar with this code        body   on        mousewheel   function e            if  e target id     el   return          e preventDefault            e stopPropagation                 Also you can enable it again with this code        body   unbind  mousewheel

User · Answer

So far we have overflow hidden on the body   However IE doesn t always honor that and you need to put scroll  no  on the body element as well and or place overflow hidden on the html element as well   You can take this further when you need to  take control  of the view port you can do this -   lt style gt   body  width 100   height 100   overflow hidden  margin 0     html  width 100   height 100   overflow hidden     lt  style gt    An element granted height 100  in the body has the full height of the window viewport  and element positioned absolutely using bottom nnPX will be set nn pixels above the bottom edge of the window  etc

User · Answer

In case you also need support for Internet Explorer 6  just overflow the html     html   css  overflow    hidden      and     html   css  overflow    auto

User · Answer

IE has some bug with the scrollbars  So if you want either of the two  you must include the following to hide the horizontal scrollbar   overflow-x  hidden  overflow-y scroll   and to hide vertical   overflow-y  hidden  overflow-x  scroll

User · Answer

In case you need possibility to hide and show scrollbars dynamically you could use     body   css  overflow    hidden      and     body   css  overflow    auto      somewhere in your code

User · Answer

Because Firefox has an arrow key short cut  you probably want to put a  lt div gt  around it with CSS style  overflow hidden

User · Answer

Try CSS   lt body style  overflow  hidden  gt

User · Answer

In modern versions of IE  IE10 and above   scrollbars can be hidden using the -ms-overflow-style property   html        -ms-overflow-style  none      In Chrome  scrollbars can be styled     -webkit-scrollbar       display  none      This is very useful if you want to use the  default  body scrolling in a web application  which is considerably faster than overflow-y  scroll

User · Answer

So far we have overflow hidden on the body   However IE doesn t always honor that and you need to put scroll  no  on the body element as well and or place overflow hidden on the html element as well   You can take this further when you need to  take control  of the view port you can do this -   lt style gt   body  width 100   height 100   overflow hidden  margin 0     html  width 100   height 100   overflow hidden     lt  style gt    An element granted height 100  in the body has the full height of the window viewport  and element positioned absolutely using bottom nnPX will be set nn pixels above the bottom edge of the window  etc

User · Answer

In case you need possibility to hide and show scrollbars dynamically you could use     body   css  overflow    hidden      and     body   css  overflow    auto      somewhere in your code

User · Answer

Try CSS   lt body style  overflow  hidden  gt

User · Answer

So far we have overflow hidden on the body   However IE doesn t always honor that and you need to put scroll  no  on the body element as well and or place overflow hidden on the html element as well   You can take this further when you need to  take control  of the view port you can do this -   lt style gt   body  width 100   height 100   overflow hidden  margin 0     html  width 100   height 100   overflow hidden     lt  style gt    An element granted height 100  in the body has the full height of the window viewport  and element positioned absolutely using bottom nnPX will be set nn pixels above the bottom edge of the window  etc

User · Answer

IE has some bug with the scrollbars  So if you want either of the two  you must include the following to hide the horizontal scrollbar   overflow-x  hidden  overflow-y scroll   and to hide vertical   overflow-y  hidden  overflow-x  scroll

User · Answer

I can t comment yet  but wanted to share this    Lyncee s code worked for me in desktop browser  However  on iPad  Chrome  iOS 9   it crashed the application  To fix it  I changed   document documentElement style overflow         to  document body style overflow         which solved my problem

User · Answer

Using JQuery you can disable scrolling bar with this code        body   on        mousewheel   function e            if  e target id     el   return          e preventDefault            e stopPropagation                 Also you can enable it again with this code        body   unbind  mousewheel

User · Answer

In case you need possibility to hide and show scrollbars dynamically you could use     body   css  overflow    hidden      and     body   css  overflow    auto      somewhere in your code

User · Answer

So far we have overflow hidden on the body   However IE doesn t always honor that and you need to put scroll  no  on the body element as well and or place overflow hidden on the html element as well   You can take this further when you need to  take control  of the view port you can do this -   lt style gt   body  width 100   height 100   overflow hidden  margin 0     html  width 100   height 100   overflow hidden     lt  style gt    An element granted height 100  in the body has the full height of the window viewport  and element positioned absolutely using bottom nnPX will be set nn pixels above the bottom edge of the window  etc

User · Answer

Try CSS   If you want to remove Horizontal  overflow-x  hidden    And if you want to remove Vertical  overflow-y  hidden

User · Answer

Because Firefox has an arrow key short cut  you probably want to put a  lt div gt  around it with CSS style  overflow hidden

User · Answer

In case you also need support for Internet Explorer 6  just overflow the html     html   css  overflow    hidden      and     html   css  overflow    auto

User · Answer

Try CSS   If you want to remove Horizontal  overflow-x  hidden    And if you want to remove Vertical  overflow-y  hidden

User · Answer

In modern versions of IE  IE10 and above   scrollbars can be hidden using the -ms-overflow-style property   html        -ms-overflow-style  none      In Chrome  scrollbars can be styled     -webkit-scrollbar       display  none      This is very useful if you want to use the  default  body scrolling in a web application  which is considerably faster than overflow-y  scroll

User · Answer

function reloadScrollBars         document documentElement style overflow    auto       firefox  chrome     document body scroll    yes      ie only    function unloadScrollBars         document documentElement style overflow    hidden       firefox  chrome     document body scroll    no      ie only

User · Answer

Try CSS   lt body style  overflow  hidden  gt

User · Answer

In case you need possibility to hide and show scrollbars dynamically you could use     body   css  overflow    hidden      and     body   css  overflow    auto      somewhere in your code

User · Answer

I can t comment yet  but wanted to share this    Lyncee s code worked for me in desktop browser  However  on iPad  Chrome  iOS 9   it crashed the application  To fix it  I changed   document documentElement style overflow         to  document body style overflow         which solved my problem

[javascript] Disable browsers vertical and horizontal scrollbars

Examples related to javascript

Examples related to jquery