使用 touch-action 属性可以明确告诉浏览器哪些手势由页面处理，哪些由元素内部处理，从而解决移动端滑动冲突。具体做法是在需要自定义触摸交互的元素上设置 touch-action: none，禁止浏览器默认行为，同时在容器或特定方向上保留 pan-x 或 pan-y 以允许滚动。
如何禁用默认触摸行为并启用自定义逻辑
在实现拖拽、缩放或画板等交互时，必须阻止浏览器的默认滚动和缩放行为。将目标元素的 touch-action 设置为 none 即可实现这一目的，随后通过 JavaScript 监听 touchstart、touchmove 和 touchend 事件来接管交互逻辑。
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 允许水平滑动，同时禁止垂直方向的默认滚动，从而避免与页面整体滚动冲突。
.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 后，它不仅禁用了触摸手势，还会影响键盘导航。如果该元素不是可聚焦元素（如 <div>），则无法通过 Tab 键获得焦点。如果需要支持键盘访问，应确保元素具有 <code>tabindex="0" 或使用语义化标签如 <button></button>，否则屏幕阅读器和键盘用户将无法与该元素交互。
