javascript - Setting overflow:hidden to bodyhtml hides scrollbars but does not disable scrolling in Firefox - Stack Overflow

admin管理员组

文章数量:1336102

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 e 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).

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 e 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).

• javascript
• jquery
• css
• dom
• scroll

Share Improve this question Follow asked May 28, 2011 at 22:59 Alex BAlex B 1,01933 gold badges1818 silver badges2727 bronze badges 4

• Why not just use a container DIV instead of the body/html? – wdm Commented May 29, 2011 at 7:05
• Are you suggesting a container div just within the body? Do you reckon FF will react properly to this? – Alex B Commented Jun 1, 2011 at 15:12
• 1 Are you trying to do something like this? jsfiddle/wdm954/pqAJK/10 – wdm Commented Jun 1, 2011 at 17:30
• kind of, but not really. the body/html is still scrollable with the arrow keys in FF when i have turned scrolling off using overflow:hidden. in chrome it works as expected. +1 for the effort, but it's not really what i'm going for. – Alex B Commented Jun 6, 2011 at 15:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

本文标签：