怎样用CSS touch-action解决移动端滑动冲突？-css教程-PHP中文网

使用 touch-action 属性可以明确告诉浏览器哪些手势由页面处理，哪些由元素内部处理，从而解决移动端滑动冲突。具体做法是在需要自定义触摸交互的元素上设置 touch-action: none，禁止浏览器默认行为，同时在容器或特定方向上保留 pan-x 或 pan-y 以允许滚动。

怎样用CSS touch-action解决移动端滑动冲突？

如何禁用默认触摸行为并启用自定义逻辑

在实现拖拽、缩放或画板等交互时，必须阻止浏览器的默认滚动和缩放行为。将目标元素的 touch-action 设置为 none 即可实现这一目的，随后通过 JavaScript 监听 touchstart、touchmove 和 touchend 事件来接管交互逻辑。

怎样用CSS touch-action解决移动端滑动冲突？

const el = document.getElementById('draggable');
el.style.touchAction = 'none';
el.addEventListener('touchstart', (e) => {
  e.preventDefault(); // 防止默认行为
  console.log('Touch started');
});
el.addEventListener('touchmove', (e) => {
  e.preventDefault();
  console.log('Touch moved');
});

上述代码中，el 元素被赋予了 touch-action: none 样式。当用户在该元素上进行触摸操作时，浏览器不会触发滚动或缩放，而是将事件传递给 JavaScript。调用 e.preventDefault() 进一步确保没有默认的浏览器行为干扰。预期结果是控制台打印出触摸开始和移动的信息，且页面背景保持静止。

如何在局部区域允许单向滚动

当页面包含多个可滚动区域，或者需要在某个区域内仅允许水平或垂直滚动时，可以使用 pan-x 或 pan-y 值。例如，在一个横向滚动的画廊容器中，设置 touch-action: pan-x 允许水平滑动，同时禁止垂直方向的默认滚动，从而避免与页面整体滚动冲突。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

怎样用CSS touch-action解决移动端滑动冲突？

.gallery {
  touch-action: pan-x;
  overflow-x: auto;
  white-space: nowrap;
}
.gallery-item {
  display: inline-block;
  width: 300px;
  height: 200px;
}

在此示例中，.gallery 类设置了 touch-action: pan-x。这意味着用户在 .gallery 区域内垂直滑动时，浏览器会忽略该动作（不触发页面滚动），而水平滑动则用于滚动画廊内容。这种配置解决了嵌套滚动或局部滚动时的冲突问题。预期结果是用户可以流畅地水平滑动画廊，而垂直滑动不会影响页面其他部分。

touch-action: none 对键盘焦点的影响是什么

当元素设置了 touch-action: none 后，它不仅禁用了触摸手势，还会影响键盘导航。如果该元素不是可聚焦元素（如

），则无法通过 Tab 键获得焦点。如果需要支持键盘访问，应确保元素具有 tabindex="0" 或使用语义化标签如 ，否则屏幕阅读器和键盘用户将无法与该元素交互。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！