禁用水平滚动JavaScript

Disable horizontal scroll with JavaScript

本文关键字：JavaScript 滚动 水平      更新时间：2023-09-26

有没有人知道，如果有一种方法来禁用水平滚动条使用JavaScript?

我不想用overflow-x: hidden;

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

你也可以这样做:

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

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

您最好创建一个环境，其中不存在不必要的UI元素(通过CSS，通过设计)。上面提到的方法显示了不必要的UI元素(滚动条)，然后导致它们不能按用户期望的方式工作(滚动页面)。你已经"破坏了与用户的契约"——当用户做一个熟悉的动作时，他们怎么能相信你的网站或应用程序的其余部分会做预期的事情呢?

防止元素向下滚动的方法:

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

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

一个肮脏的技巧是重叠滚动条: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;
}
相关文章：