禁用移动端滑动手势

使用 CSS 禁止移动端页面的左右划动手势

问题

如何使用 CSS 禁止移动端页面的左右划动手势？

touch-action 属性用于设置触摸屏用户如何操纵元素的区域，可以控制浏览器内置的缩放、滑动等功能。

html {
  touch-action: none; /* 禁用所有手势 */
}

如果只想禁用左右滑动，保留上下滚动：

html {
  touch-action: pan-y; /* 只允许垂直滑动 */
}

通过设置元素宽度和隐藏横向溢出内容来防止左右滑动：

html {
  width: 100vw;
  overflow-x: hidden;
}