禁用水平滚动；但允许垂直滚动答案

【问题标题】：Disable horizontal scroll; but allow vertical scroll禁用水平滚动；但允许垂直滚动
【发布时间】：2014-05-05 21:17:46
【问题描述】：

我正在尝试禁用网站上的水平滚动； 但允许垂直滚动。

我有一个脚本，它通过向左滑动页面的“正文”并显示更多内容来像滑块一样工作。但是，这会在右侧创建额外的空白空间。

我需要禁用水平滚动，这样用户就不会看到这个空白区域。我尝试了以下脚本，但它禁用了水平和垂直滚动：

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

我尝试过overflow-x: hidden，但是当身体的宽度是动态的而不是静态的时，这不起作用。

问题：

有没有办法修改上面的脚本来禁用水平滚动并保持垂直滚动？

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

你很接近得到它。你需要得到document——或window——并绑定滚动：然后你可以检查scrollLeft是否更新为大于0并设置scrollLeft 到 0。

下一段代码运行良好：

$(function() {

    var $body = $(document);
    $body.bind('scroll', function() {
        // "Disable" the horizontal scroll.
        if ($body.scrollLeft() !== 0) {
            $body.scrollLeft(0);
        }
    });

});

如果您想禁用元素的水平滚动（例如 div），您只需将 $(document) 替换为 $("#yourElementID")

JSFiddle： https://jsfiddle.net/tomloprod/zx1bvdf5/

注意：

上面的脚本会阻止你水平滚动，此外，你可以使用下一个 CSS 样式：overflow-x:hidden; 来隐藏水平滚动。

就像没有水平滚动一样。

【讨论】：

【解决方案2】：

这应该可以工作（CSS）：

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

【讨论】：

【解决方案3】：

在你的包装元素上使用overflow-x:hidden

overflow-x:hidden;

【讨论】：

【解决方案4】：

没有 JQuery：

window.onscroll = function () {
  window.scrollLeft = 0;
}

【讨论】：

【解决方案5】：

这是我为解决我的问题所做的。

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

希望这会有所帮助。

【讨论】：

【解决方案6】：

你也可以 jQuery 的“on”，并检查 deltaX。

$("body").on("wheel", function(e) {
  var deltaX = e.originalEvent.deltaX;

  if (deltaX !== 100 && deltaX !== -100) {
    // ...do something
  }

  return false;
});

【讨论】：

【解决方案7】：

CSS：

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden auto;
}

100vw/vh 表示 100% 的视口（=窗口内部）宽度/高度。

hidden auto 表示永远不会在 x 上显示滚动，并在必要时在 y 上显示滚动。

【讨论】：