禁用手机的水平滚动

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
}