CSS 属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动、缩放等)。

/* Keyword values */

touch-action: auto;

touch-action: none;

touch-action: pan-x;

touch-action: pan-left;

touch-action: pan-right;

touch-action: pan-y;

touch-action: pan-up;

touch-action: pan-down;

touch-action: pinch-zoom;

touch-action: manipulation;

/* Global values */

touch-action: inherit;

touch-action: initial;

touch-action: unset;

默认情况下,平移(滚动)和缩放手势由浏览器专门处理。

使用 Pointer_events 的应用程序将在浏览器开始处理触摸手势时收到一个 pointercancel 事件。

通过明确指定浏览器应该处理哪些手势,应用程序可以在 pointermove 和 pointerup 监听器中为其余的手势提供自己的行为。

使用 Touch_events 的应用程序通过调用 preventDefault() 禁用浏览器处理手势,

但也应使用触摸操作确保浏览器在调用任何事件侦听器之前,了解应用程序的意图。

当手势开始时,浏览器与触摸的元素及其所有祖先的触摸动作值相交直到一个实现手势

(换句话说,第一个包含滚动元素)的触摸动作值。 这意味着在实践中,触摸动作通常仅适用于具有某些自定义行为的单个元素,

而无需在该元素的任何后代上明确指定触摸动作。 手势开始之后,触摸动作值的更改将不会对当前手势的行为产生任何影响。

使用语法

touch-action 属性可以被指定为:

  • 任何一个关键字 autononemanipulation,或
  • 零或任何一个关键字 pan-xpan-leftpan-right,加零或任何一个关键字 pan-ypan-uppan-down,加可选关键字 pinch-zoom

auto 当触控事件发生在元素上时,由浏览器来决定进行哪些操作,比如对viewport进行平滑、缩放等。 none 当触控事件发生在元素上时,不进行任何操作。 pan-x 启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和/或 pinch-zoom 组合使用。 pan-y 启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和/或 pinch-zoom 组合使用。 manipulation 浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。 启用平移和缩小缩放手势,但禁用其他非标准手势,例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。 这是“pan-x pan-y pinch-zoom”(为了兼容性本身仍然有效)的别名。 pan-left, pan-right, pan-up, pan-down 
启用以指定方向滚动开始的单指手势。 一旦滚动开始,方向可能仍然相反。 请注意,滚动“向上”(pan-up)意味着用户正在将其手指向下拖动到屏幕表面上, 同样 pan-left 表示用户将其手指向右拖动。 多个方向可以组合, 除非有更简单的表示(例如,“pan-left pan-right”无效,因为“pan-x”更简单,而“pan-left pan-down”有效)。 pinch-zoom 启用多手指平移和缩放页面。 这可以与任何平移值组合。

浏览器兼容性

CSS 属性:touch-action的更多相关文章

  1. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  2. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  3. css 属性相关

    css属性相关 宽和高 width属性可以为元素设置宽度, height属性可以为元素设置好高度 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family 可以把 ...

  4. 《Head First HTML与CSS》的CSS属性

    关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...

  5. css属性、样式、边框、选择器

    CSS 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言, 用来描述 HTML或 XML(包括如 SVG.MathML.XHTML 之类的 XML 分 ...

  6. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  7. 换行的css属性

    //正常换行  word-break:keep-all;word-wrap:normal; //下面这行是自动换行  word-break:break-all;word-wrap:break-word ...

  8. jquery css属性练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  10. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

随机推荐

  1. 20145219 《Java程序设计》实验三 敏捷开发与XP实践

    20145219 <Java程序设计>实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 敏捷开发与XP 1.敏捷开发(Agile Development)是 ...

  2. 20145109《Java程序设计》第二周学习总结

    20145109 <Java程序设计>第二周学习总结 教材学习内容总结 Variable : naming rule : Camel case no default value e.g : ...

  3. Madplay移植到mini2440开发板【转】

    本文转载自:https://blog.csdn.net/simanstar/article/details/24035379 madplay交叉编译 交叉编译器:arm-linux-gcc 3.4.1 ...

  4. Oracle中清除BIN$开头的垃圾表的解决办法 [转]

    oracle drop table的时候,不会彻底删除该表,它将drop的表放到了自己的回收站里,放到回收站的表就是我们看到的形如bin$/rt62vkdt5wmrjfcz28eja==$0的表,其中 ...

  5. 【P3355】骑士共存问题(最大流+黑白染色,洛谷)

    这个题刚看上去就让人不禁想到一道叫做方格取数问题的题目,事实上也就是这么做,对棋盘黑白染色,然后黑格子连源点,白的连汇点,点权为1.然后判断一下黑格子能影响到的白格子,边权为inf,跑一遍最大流就可以 ...

  6. android studio 连接 华为手机真机

    1.手机开启开发者模式(Honor V10) 设置->关于手机->连续点击版本号5次就能出现开发者模式->返回上一级出现开发者选项->打开选项(开发者选项,USB调试) 2.a ...

  7. JavaWeb -- Struts2 ResultType细化, 国际化

    1. ResultType细化 <result-types> <result-type name="chain" class="com.opensymp ...

  8. NumPy数学算数函数

    NumPy - 算数函数 很容易理解的是,NumPy 包含大量的各种数学运算功能. NumPy 提供标准的三角函数,算术运算的函数,复数处理函数等. 三角函数 NumPy 拥有标准的三角函数,它为弧度 ...

  9. PHP服务器变量$_SERVER

    常用的就几个,自己print_r($_SERVER); 看看. $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关. $_SERVER['argv ...

  10. MySQL-5.7复制功能的默认设置改进

    1. 默认开启简化的GTID 恢复 Binlog_gtid_simple_recovery=TURE(默认值)      这个参数控制了当mysql启动或重启时,mysql在搜寻GTIDs时是如何迭代 ...