html禁止移动端左右滑动

要禁止移动端页面的左右滑动,你可以使用 CSS 的 overflow-x 属性和 JavaScript 来实现。以下是一种常见的方法:

通过 CSS 设置:
css
Copy code
body {
overflow-x: hidden; /* 禁止水平滚动 /
overflow-y: auto; /
允许垂直滚动 */
}
通过 JavaScript 设置:
javascript
Copy code
// 禁止触摸事件的默认行为
document.addEventListener(‘touchmove’, function(event) {
event.preventDefault();
}, { passive: false });
这将禁止在移动设备上触发的 touchmove 事件的默认行为,从而阻止页面左右滑动。

请注意,虽然上述方法可以阻止页面的左右滑动,但在某些情况下,可能会破坏网站的用户体验,因为用户无法滚动查看页面内容。因此,在应用这些方法之前,请确保你真正需要禁止页面的左右滑动,并在实际应用中进行充分测试。

<script>
    // 禁止触摸事件的默认行为
    document.addEventListener('touchmove', function(event) {
      event.preventDefault();
    }, { passive: false });
  </script>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值