touch-action CSS 属性是一个用于设置触摸操作（如触摸滑动、双击缩放等）在特定元素上的默认行为如何被浏览器处理的属性。这个属性主要用于优化移动端和触摸设备的交互体验，减少不必要的触摸事件处理或冲突，特别是在处理滚动、缩放等复杂交互时。

语法
element {
  touch-action: auto | none | manipulation | pan-x | pan-y | pan-x pan-y | pinch-zoom;
}
  • 1.
  • 2.
  • 3.
值
  • auto：默认值。浏览器会应用其默认的触摸行为。
  • none：禁止触摸事件上的默认行为，所有触摸事件都会传递给元素（包括滚动）。这通常用于需要完全控制触摸行为的自定义滚动、拖拽等场景。
  • manipulation：允许水平及垂直滚动，并阻止其他非标准的默认触摸行为（如双击缩放）。这通常适用于需要滚动的区域，但又不希望触发其他复杂触摸交互的场合。
  • pan-x：允许水平滚动，并阻止其他所有默认触摸行为（包括垂直滚动）。
  • pan-y：允许垂直滚动，并阻止其他所有默认触摸行为（包括水平滚动）。
  • pan-x pan-y：允许水平和垂直滚动，并阻止其他所有默认触摸行为。
  • pinch-zoom：允许用户通过触摸进行缩放（例如，双指缩放）。注意，这个值并不阻止滚动，滚动行为仍可能由 auto、pan-x、pan-y 或 manipulation 控制。
使用场景
  • 自定义滚动：当你需要在某个元素内实现自定义滚动时，可以将 touch-action 设置为 none，这样浏览器就不会干预你的滚动逻辑。
  • 提升滚动性能：对于大型列表或图片库，可以通过设置 touch-action: pan-y 来优化垂直滚动性能，同时阻止其他可能会干扰滚动流畅性的默认触摸行为。
  • 防止不必要的缩放：在某些情况下，你可能不希望用户通过触摸来缩放页面或元素（尤其是在小屏幕设备上），这时可以将 touch-action 设置为 manipulation 或更具体的值来阻止这种行为。
注意事项
  • touch-action 属性主要影响的是触摸事件的默认行为，对于通过 JavaScript 监听并处理的事件，其效果可能有限。
  • 并非所有浏览器都完全支持 touch-action 属性的所有值，因此在跨浏览器开发中需要注意兼容性。
  • 使用 touch-action 时应谨慎，确保它不会干扰用户的正常交互或导致意外的行为。