html禁止移动端左右滑动 您所在的位置:网站首页 html后退代码 html禁止移动端左右滑动

html禁止移动端左右滑动

2024-07-15 20:59| 来源: 网络整理| 查看: 265

要禁止移动端页面的左右滑动,你可以使用 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 事件的默认行为,从而阻止页面左右滑动。

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

// 禁止触摸事件的默认行为 document.addEventListener('touchmove', function(event) { event.preventDefault(); }, { passive: false });


【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有