使用JavaScript禁用水平滚动

Question

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

我不想使用overflow-x: hidden; 。

Answer 1

如果不使用完全可行的overflow-x CSS属性，您可以通过javascript或HTML / CSS设计将内容调整为不需要滚动条。

你也可以这样做：

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

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

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

Answer 2

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

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

好吧，这实际上并没有阻止滚动，但它“向后滚动”到元素的左上角，类似于为窗口而不是单个元素创建的Chris'解决方案。 删除scrollTop或scrollLeft行以满足您的需要。

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