Forums » Help » When the page has a vertical scrollbar

sometimes, the page where the game is loaded is huge, and needs a vertical scrollbar.

how to make sure that our game controls ( up, down, left, right, spacebar) do not interfere with the browser's controls?

eg: http://drop.tapjs.com has a vertical scrollbar. If ( let's say ) the Drop game has a 'down' button, pressing the 'Down' key on the keyboard will actually scroll the page down, which kinda sucks.

hmm I noticed that BFresh uploaded a new game at http://www.mutantzombiemonsters.com/ and it 'captured' the controls, preventing ANY scrolling!

anyone has a clue how BFresh did it? I can't read through the baked code.

These are jquery specific since that's what I use...

http://stackoverflow.com/questions/1056562/simple-javascript-question-how-do-i-prevent-scrolling-with-arrow-keys-but-not-th

impact is doing something similar with the key bindings behind the hood... shouldn't be that hard to stick it in there with a return false/prevent default type option.... I'm crashing but I'll look into it tomorrow if nobody beats me to it.

preventDefault(). The usage is outlined in the link MyShuitings provided.

This stops the default action but allows the code to continue, so you may be able to put this in the function you have bound to the up/down arrow keys.

This is different then "return false;" which prevents the default action and stops the rest of the function.

I have not tested any of that so shooting from the hip. I will try it out on the Tap example to test.

I just took a look at Impacts input code and it looks like it is already doing this. Dominic already took care of this. Yay Dom! :)

I only call preventDefault() for those keys that are bound to an action. So if you didn't bind space in your game, pressing the space bar will still scroll the page down one screen.

I didn't want to "capture" all keys on a page, even if they're not used by the game. If you want to disable certain keys, just bind them to a "dummy" action:

// prevent scrolling
ig.input.bind( ig.KEY.UP_ARROW, 'dummy' );
ig.input.bind( ig.KEY.DOWN_ARROW, 'dummy' );
ig.input.bind( ig.KEY.SPACE, 'dummy' );

Note that Opera still ignores preventDefault() for some keys, but they promised to fix that :)

Yep, I didn't do anything special for my game, it just happened to use the keys that also scroll the page and it all worked great out of the box. The arrows control character movement and spacebar pauses the game. If you hit pageup/pagedown, the page still scrolls but I don't mind that. I agree about the dummy key bindings if you don't want those particular buttons to do anything in your game but not to scroll the page.