防止 x 轴在移动设备上滚动

当使用移动设备查看网页时，我们可能希望保持页面的设计不变，同时又想防止 x 轴在移动设备上滚动。本文将介绍实现这一功能的多种方式。

使用CSS属性 overflow-x: hidden;

body {
  overflow-x: hidden;
}

这种方式可以禁止x轴滚动，但有一个缺点，就是如果内容超出视图范围，内容将无法被滚动显示，而无法访问被扣除的部分。

使用CSS属性 position: fixed;

body {
  position: fixed;
  overflow: scroll;
  width: 100%;
}

这种方式可以防止x轴滚动，并且能支持滚动。但这会在使用移动设备查看内容时造成视觉上下文的截断。

使用 JavaScript

var preventDefault = function(e) {
  e.preventDefault();
};

document.addEventListener('touchmove', preventDefault, {
  passive: false
});

这种方式可以防止网页在移动设备上的滚动，不过如果页面中有可滚动的元素，则不存在问题，否则滚动只能在元素上操作，而不是网页文档。

无论选哪种方式，都需要明确要求页面中的内容不能被x轴滚动。如果页面中存在可滚动的元素，则应使用上述JavaScript解决方案之一，这是因为使用 overflow-x: hidden; 或 position: fixed; 会将底部的可滚动元素隐藏。