Question

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

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

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

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

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

问题：

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

Answer 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;来隐藏水平滚动。

就像没有水平滚动一样。

Answer 2

这应该有效（CSS）：

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

Answer 3

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

Answer 4

没有JQuery：

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

Answer 5

这是我为解决问题而做的事情。

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

希望这会有所帮助。

Answer 6

您也可以在＃34;上查看＆＃34;并检查deltaX。

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

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

  return false;
});

Answer 7

CSS：

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

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

hidden auto表示从不在x上显示滚动，在必要时不显示y滚动。

禁用水平滚动;但允许垂直滚动

问题：

7 个答案: