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