使用JavaScript禁用网页水平滚动

Question

有没有办法使用JavaScript禁用水平滚动条？我不想使用overflow-x: hidden;。

- Jay

---

实际上，最简单的方法是在想要隐藏滚动条时应用 overflow-x 样式，而在想要显示滚动条时将其移除。 - n8wrl

你能解释一下为什么不想使用 overflow-x:hidden 吗？ - Sparky

可能是因为iOS在许多情况下都有忽略它的倾向。 - El Yobo

Answer 1

如果不使用 CSS 属性 overflow-x，你可以通过 JavaScript 或者 HTML/CSS 设计来调整内容的大小以避免出现滚动条。

你也可以这样做：

window.onscroll = function () {
 window.scrollTo(0,0);
}

...这将检测任何滚动并自动将其返回到页面的顶部/左侧。值得一提的是，做这样的事情肯定会让您的用户感到沮丧。

最好通过CSS或设计创建一个不存在不需要的UI元素的环境。上述方法显示了不必要的UI元素（滚动条），然后导致它们不能按照用户预期的方式工作（滚动页面）。您已经“违反了与用户的契约”-当用户进行熟悉操作时，他们如何相信您网站或应用程序的其余部分将按照预期工作？

- Chris Baker

---

+1 对于那些沮丧的用户的注释，我也算一个 :) - Sander

我通常会设置 overflow-x: hidden。但通常这并不能防止浏览器在使用OSX触摸板时水平滚动目标。 - Alex Kosenkov

Answer 2

使用jQuery防止元素向下滚动的方法：

$(element).scroll(function () {
    this.scrollTop = 0;
    this.scrollLeft = 0;
});

实际上，这并不能阻止滚动，但它会将元素“滚动回”到左上角，类似于Chris的解决方案，该方案是针对整个窗口而不是单个元素创建的。根据您的需求删除scrollTop或scrollLeft行。

- Lekensteyn

---

@Reuben 使用 scrollLeft 而不是 scrollTop。 - Lekensteyn

我认为删除 this.scrollTop = 0; 这行代码就是答案！ - Reuben

Answer 3

一个不太好的技巧是重叠滚动条：http://jsfiddle.net/dJqgf/。

var overlap = $('<div id=b>');

$("#a").wrap($('<div>'));

$("#a").parent().append(overlap);

使用：

#a {
    width: 100px;
    height: 200px;
    overflow-x: scroll;
}

#b {
    position: relative;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 20px;
    background-color: white;
}

- pimvdb