使用JavaScript禁用水平滚动

有人知道是否有办法使用JavaScript禁用水平滚动条吗

---

我不想使用

overflow-x:hidden

如果不使用完全可行的

overflow-x

CSS属性，您可以通过javascript或HTML/CSS设计调整内容大小，使其不需要滚动条

您也可以这样做：

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

。。。它将检测任何滚动并自动将滚动返回到顶部/左侧。值得一提的是，这样做肯定会让用户失望

---

通过创建一个完全不存在不需要的UI元素的环境（通过CSS，通过设计），您会得到最好的服务。上面提到的方法显示不必要的UI元素（滚动条），然后导致它们不能以用户期望的方式工作（滚动页面）。您已经与用户“违反了合同”-当用户执行熟悉的操作时，他们怎么能相信您的网站或应用程序的其余部分会做预期的事情？

一种防止元素在jQuery中向下滚动的方法：

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

---

实际上，这并不阻止滚动，但它会“向后滚动”到元素的左上角，类似于Chris为窗口而不是单个元素创建的解决方案。删除

scrollTop

或

scrollLeft

行以满足您的需要。

一个肮脏的技巧是重叠滚动条：

---

实际上，最简单的方法是在你想隐藏滚动条时应用overflow-x样式，然后在你想显示滚动条时将其删除。你能解释一下为什么你不想使用

overflow-x:hidden

？可能是因为iOS在很多情况下都倾向于忽略它。+1对于沮丧用户的说明，把我算在那个组：）我通常设置溢出-x:隐藏。但这通常不会阻止浏览器使用OSX触摸板水平滚动目标。@鲁本使用

scrollLeft

而不是

scrollTop

。我会说删除

this.scrollTop=0这绝对是答案！
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;
}