CODEWITHSUNDEEP
css
nick
nick

Reputation: 1246

disable horizontal scrolling with css

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?

Upvotes: 3

Views: 955

Answers (1)

user3141031
user3141031

Reputation:

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/

Upvotes: 2

Related Questions