touch-action CSS 属性是一个用于设置触摸操作（如触摸滑动、双击缩放等）在特定元素上的默认行为如何被浏览器处理的属性。这个属性主要用于优化移动端和触摸设备的交互体验，减少不必要的触摸事件处理或冲突，特别是在处理滚动、缩放等复杂交互时。
语法
element {touch-action: auto | none | manipulation | pan-x | pan-y | pan-x pan-y | pinch-zoom;
}
值
- 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时应谨慎，确保它不会干扰用户的正常交互或导致意外的行为。
