CSS: make overflow-x: hidden truly hidden?

Question

I have a div that is styled with overflow-x: hidden, but I\'m finding that when there is a wider div inside it that contains text, the user can still drag sidew

Answer 1

Presuming the simplified HTML code is:

content...

Set both body, html to height:100%;

body, html {height:100%;}

Put a div inside body, and set it to stretch across all the body height:

div.wrap {height:100%; overflow:hidden;}

This will prevent window from scrolling in weird ways, like, pressing mouse wheel and moving it, using anchors, etc.

To remove the scroll bar itself (visually), you should also add:

body {overflow: hidden; }

---

To disable scrolling via pressing arrow keys on keyboard:

window.addEventListener("keydown", function(e) {
    // space, page up, page down and arrow keys:
    if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);