22

I have a problem that I'm not even sure what to search for in order to fix. When I press the spacebar my entire page moves up (scrolls down): I don't want this to happen. My body tag is styled to overflow:hidden, if that has anything to do with it, so the page won't have any scrollbars. I'm usually pretty good at executing the preliminary troubleshooting techniques but in this case I don't even know where to start. How can I stop this behaviour?

Additional information: I am using jQuery 1.4.2

Sz.
  • 3,342
  • 1
  • 30
  • 43
sadmicrowave
  • 39,964
  • 34
  • 108
  • 180
  • 3
    It's standard behavior in firefox and maybe some other browsers too. If you are using a javascript library I could suggest a way to override this... are you? – Alex Weber Feb 26 '10 at 17:41
  • 1
    That's a built-in function (at least in IE8, Firefox, Chrome, Safari, and Opera), to enable users to scroll down without touching the mouse. – Michael Todd Feb 26 '10 at 17:42
  • 6
    Just a word of warning: changing a browsers expected behavior just because you don't want it to work that way on your web site could cause people to complain. – Michael Todd Feb 26 '10 at 17:43
  • 2
    Michael, that's a good point but I tend to disagree. Some of the most captivating page navigation I've seen is when, for example, mouse wheel scroll behavior is overridden to make the page scroll horizontally. Changing default behavior moderately can be a great tool! – Alex Weber Feb 26 '10 at 17:45
  • 3
    @Michael Todd: I agree, and regrettably disagree with Alex. UX is about making things behave the way users expect them to behave. What if you randomly underlined words in your text and made them blue, plus giving them a hand cursor on rollover? Clicking might do nothing, or it might spin the word, or perform some other behavior you feel is "captivating," but I guarantee it is simply going to annoy most people because they expect something that looks like a hyperlink to take them to another page. – Robusto Feb 26 '10 at 17:51
  • @Michael, @Alex, @Robusto - Alex is right sometimes you can safely override the default behavior with great UX results. Just take a look at Google Reader. Pressing space does *kinda* work the way you expect but it's enhanced to be more Outlook-like. It pages down through the current item until it gets to the end, then marks as read and goes to the next item. But canceling it altogether is maddening! – Josh Feb 26 '10 at 17:53
  • @Alex's 1st Comment -- I am using the jQuery v1.4.2 library. Thanks for everyone's comments but this website is intended for a specific viewing purpose so the user won't ever need to press the spacebar therefore, 'eating' the keystroke (as some of you put it) would work....however, I don't know how to do this 'eating' action...please advise... – sadmicrowave Feb 26 '10 at 18:40
  • 1
    I posted an example in my answer. – Josh Feb 26 '10 at 18:52

3 Answers3

27

This default scrolling behavior comes from the keydown event. In order to prevent it, you must handle the keydown event and prevent the default behavior, either by returning false from the event handler or calling event.preventDefault().

As a rule of thumb, think carefully before you prevent default behavior like spacebar scrolling. I use it all the time and I get extremely annoyed when it doesn't work in a page.

But if you want to eat the key...

window.onkeydown = function(e) {
    return e.keyCode !== 32;
};

According to the MDN web docs for KeyboardEvent#keyCode, keyCode is a deprecated property. Although it still works in most browsers, you are encouraged to use KeyboardEvent#key going forward, which is a more standardized string representation of a key. The key value for spacebar is literally the input value: " " (single space string). So if you wanted to be very careful to support all browsers, you could write:

window.onkeydown = function(e) {
    return ev.keyCode !== 32 && ev.key !== " ";
}
Sam Claus
  • 1,807
  • 23
  • 39
Josh
  • 68,005
  • 14
  • 144
  • 156
7

It's not enough to just hide the overflow; you actually have to make it not overflow. Even if you could disable the behavior (eating the keystroke, putting focus inside some other container), the user might still be able to scroll via the keyboard, by drag-selecting text on the page, holding down the middle mouse button, etc... It's really up to their browser, and so long as the content is still technically visible, they'll probably have some way to scroll it into view.

Time to re-think your layout.

Shog9
  • 156,901
  • 35
  • 231
  • 235
3

The behavior you describe is pretty standard. If you are creating content that is taller than the page, why are you hiding some of it?

Robusto
  • 31,447
  • 8
  • 56
  • 77