禁用css水平滚动

Question

我知道您可以使用

禁用水平滚动

overflow-x:hidden;

但是当他们按下鼠标上的滚动按钮并以这种方式移动页面时，或者当他们使用箭头键时，如何禁用它？

Answer 1

好吧，对于箭头键，您可以使浏览器使用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);

请参阅this post。

编辑：更优雅的解决方案是将您的内容放入应用了overflow-x:hidden的容器中。这是一个例子：http://jsfiddle.net/Ub4dv/