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

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

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

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

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

我已经尝试过overflow-x: hidden但是当body的宽度是动态的而不是静态时，它不起作用。

题：

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

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“on”，并检查deltaX。

 $("body").on("wheel", function(e) { var deltaX = e.originalEvent.deltaX; if (deltaX !== 100 && deltaX !== -100) { ...do something } return false; }); 

Answer 5

没有JQuery：

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