3

I know you can disable horizontal scrolling with 

overflow-x:hidden;

but what about when the uers press the scroll button on the mouse and moves the page that way, or when they use the arrow keys, how can I disable that?

nick
  • 1,226
  • 3
  • 21
  • 38

1 Answers1

2

Well, for the arrow keys you can make the browser prevent the default action of them using JavaScript.

var arrow_keys_handler = function(e) {
    switch(e.keyCode){
        case 37: case 39: case 38:  case 40: // Arrow keys
        case 32: e.preventDefault(); break; // Space
        default: break; // do not block other keys
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

See this post.

EDIT: A more elegant solution is to place your content in a container with overflow-x:hidden applied. Here's an example: http://jsfiddle.net/Ub4dv/

Community
  • 1
  • 1