禁用移动设备的水平滚动[重复]

Question

我希望禁用移动设备的垂直滚动。使用：

body {overflow-x:hidden}

适用于普通浏览器，但在移动设备上，如果元素比屏幕宽，它将允许横向滚动。

我尝试过使用此代码：

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

但它允许侧面滚动（在移动设备上）但将滚动“跳”回右侧，这不是一个完美的解决方案。

我试过用这个：

    <meta name="viewport" content=" width=device-width; initial-scale=1.0; user-scalable=0;" /> 
 $(document).bind("touchmove",function(event){
            event.preventDefault();
      });

这很完美，完全禁用了移动滚动，问题是它同时禁用了水平和垂直滚动（我希望只禁用水平滚动）。

Answer 1

试试这个：

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}