touch-action属性

简介

1 .指定某个给定的区域是否允许用户操作,以及如何响应用户操作
2 .默认情况下,平移和缩放是浏览器专门处理.这个属性用来取消浏览器默认手势行为,开发人员自定义滚动和手势行为

值类型

1 .auto.手势操作完全由浏览器自己决定.meta元素里面的viewport设置
2 .manipulation:表示浏览器只允许进行滚动和持续缩放操作,双击不能触发.这个设置可以完美解决移动端点击300ms延时的bug

html{
touch-action:manipulation
}

3 .pan-x:手指可以左右平移
4 .pan-left:手指可以往左移动,移动开始后可以往右恢复
5 .pan-right:手指可以往右移动,移动开始后还是可以往左恢复的
6 .pan-y:手指可以垂直移来移去
7 .pan-up:手指可以晚上移动
8 .pan-down:手指可以往下移动
9 .pan-zoom:手指可以用来缩放页面

使用场景1

1 .touch-action:none;禁用元素上的所有手势,使用自己的拖放和缩放api
2 .touch-action:manipulation;解决缩放手势引起的点击事件延迟
3 .使用指针事件处理水平平移的图像轮播，但不想干扰网页的垂直滚动或缩放

.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}