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

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 ），则只需要用$("#yourElementID")替换$(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

overflow-x:hidden;

Answer 4

没有JQuery：

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

Answer 5

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

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

希望这可以帮助。

Answer 6

你也可以jQuery“on”，并检查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上的滚动。