使用CSS禁用水平滚动

Question

我知道您可以使用以下方法禁用水平滚动：

overflow-x:hidden;

但是当用户按下鼠标上的滚动按钮并通过此方式移动页面，或者使用箭头键时该怎么办？我如何禁用它们？

- nick

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);

请参考这篇文章。

编辑: 更优雅的解决方法是将你的内容放在一个容器中，并应用overflow-x:hidden。这里有一个例子：http://jsfiddle.net/Ub4dv/

- user3141031

---

谢谢，这对箭头键有效，关于鼠标点击有什么想法吗？ - nick