Setting overflow:hidden to body/html hides scrollbars but does not disable scrolling in Firefox

I can disable the scrolling in Chrome/Safari but putting overflow 开发者_运维知识库hidden on the body tag, but on Firefox this only hides the scrollbars and I can still scroll with the arrow keys. Why is this?

Also I'm animating using jQuery to slide down to a particular area on my page. With FF i have to animate the html tag but with Chrome/Safari it is just the body I need to animate. Haven't tested in IE yet but I'm expecting that to be an abomination :D.

So how come I can disable scrolling of the body on Chrome but not FF?

Note: Oh and i have tried setting overflow hidden on the html tag for FF but this just makes it jump to top (overflow hidden on body works fine for both browsers).

You may set the position of body to "fixed"

I was able to achieve this in Firefox by binding a jQuery listener for keydown event on the html element and returning false.

// Disable Scrolling by keys
$("html").keydown(function(event) {
    switch(event.keyCode) {
        case 32://space
        case 33://pgup
        case 34://pgdn
        case 35://end
        case 36://home
        case 37://left
        case 38://up
        case 39://right
        case 40://down
            return false;
    }
});

I tried jQuery's event.preventDefault() and event.stopImmediatePropogation() to no effect.

If the only way it scrolls is with the arrow keys, you could probably just return false on keypress to prevent that.

if using keydown function then textarea scroll using keys is not working... so i have done with below code. fixed my problem with firefox scroll issue.

$(window).scroll(function () { 
  window.scrollTo(0,0);
});