CSS 属性:touch-action
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 属性可以被指定为:
- 任何一个关键字
auto
、none
、manipulation
,或 - 零或任何一个关键字
pan-x
、pan-left
、pan-right
,加零或任何一个关键字pan-y
、pan-up
、pan-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的更多相关文章
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 前端基础-CSS属性操作
前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...
- css 属性相关
css属性相关 宽和高 width属性可以为元素设置宽度, height属性可以为元素设置好高度 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family 可以把 ...
- 《Head First HTML与CSS》的CSS属性
关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...
- css属性、样式、边框、选择器
CSS 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言, 用来描述 HTML或 XML(包括如 SVG.MathML.XHTML 之类的 XML 分 ...
- 通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
- 换行的css属性
//正常换行 word-break:keep-all;word-wrap:normal; //下面这行是自动换行 word-break:break-all;word-wrap:break-word ...
- jquery css属性练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- animate支持的css属性
支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...
- css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
随机推荐
- HTML5统计图表数据初始动画
在线演示 本地下载
- java实验一报告
北京电子科技学院(BESTI) 实 验 报 告 课程:Java 班级: 1352 姓名:黄晓妍 学号:20135227 成绩: 指导教师:娄嘉 ...
- git提交出现remote rejected master -> XX changes closed
问题现象: 提交git的时候出现 ! [remote rejected] master -> refs/for/master (change http://XXXX.com/myreview/c ...
- Javascript -- 示例:多选下拉选框
1. 示例:多选下拉选框 <html> <head> <meta http-equiv="Content-Type" content="te ...
- NumPy排序、搜索和计数函数
NumPy - 排序.搜索和计数函数 NumPy中提供了各种排序相关功能. 这些排序函数实现不同的排序算法,每个排序算法的特征在于执行速度,最坏情况性能,所需的工作空间和算法的稳定性. 下表显示了三种 ...
- 用纯css写一个常见的小三角形
.test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...
- Web2.0 TA 问题记录
记录一下上学期在当Web2.0 TA的时候遇到过的小朋友们问过的问题,可能会成为以后我开发上遇到的问题. 1. 元素的背景默认是boader origin的,也就是说是从边框开始延伸的. 但如果对bo ...
- 英语发音规则---A字母
英语发音规则---A字母 一.总结 一句话总结:本文所有//的音标为英音音标,[]的音标为美音音标 1.A在开音节中发/eɪ/ [e]? age /eɪdʒ/ [edʒ] 年龄 ape /eɪp/ [ ...
- 【转】Java设计模式-单例模式详解
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6510196.html 所谓单例,指的就是单实例,有且仅有一个类实例,这个单例不应该由人来控 ...
- C++(二十) — 指针常量和常量指针
1.const 常量概念 对于 const 定义的常量,必须在定义时初始化,不能在程序执行运行过程中改变. 2.指针常量.常量指针 区别 (1)技巧:从右向左读,替代方法: p:换为 p is a: ...