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

默认情况下,平移(滚动) 和 缩放手势由浏览器专门处理。该属性用于取消浏览器默认手势行为,开发人员自定义滚动和手势行为。

touch-action的值:

auto : 当触控事件发送在元素上时,由浏览器来决定进行那些操作,比如viewport进行平滑 缩放。

none : 当触控事件发生在元素上时,不进行任何操作

pan-x : 启用单指水平平移手势

pan-y : 启用单指垂直平移手势。

manipulation : 只可以进行滚动和持续缩放操作。如双击缩放等别的手势

pinch-zoom : 启用多手指平移和缩放页面,这可以和任何平移值组合 如 touch-action:pan-x pan-y pinch-zoom;


最常见的用法时禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放的行为

touch-action:none;

还有一个用法是使用指针事件处理水平平移的图片轮播,但不想干扰页面的垂直滚动或缩放

touch-action:pan-y pinch-zoom;

解决双击缩放手势引起的点击事件延迟

touch-action:manipulation;

touch-action css属性 滚动和缩放手势的更多相关文章

  1. CSS 属性:touch-action

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

  2. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

  3. CSS属性定义 文本修饰 边框效果 背景修饰

    一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

  4. 值得注意的CSS属性

    文本TEXT letter-spacing 字符间距 word-spacing 字间距 line-height 行高 text-decoration 修饰(下划线) text-indent 首行缩进 ...

  5. Python web前端 03 CSS属性

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

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

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

  7. css 属性相关

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

  8. 缩放手势 ScaleGestureDetector 源码解析,这一篇就够了

    其实在我们日常的编程中,对于缩放手势的使用并不是很经常,这一手势主要是用在图片浏览方面,比如下方例子.但是(敲重点),作为 Android 入门的基础来说,学习 ScaleGestureDetecto ...

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

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

随机推荐

  1. P4363 [九省联考2018]一双木棋chess(对抗搜索+记忆化搜索)

    传送门 这对抗搜索是个啥玩意儿…… 首先可以发现每一行的棋子数都不小于下一行,且局面可由每一行的棋子数唯一表示,那么用一个m+1进制数来表示当前局面,用longlong存,开map记忆化搜索 然后时间 ...

  2. Node.js 使用Stream的pipe(管道)方法实现文件复制

    Stream模块有一个pipe方法,可以将两个流串起来,实现所有的数据自动从Readable流进入Writable流 "use strict"; const fs = requir ...

  3. Bug调试(lldb)

    原文网址:http://www.cnblogs.com/Twisted-Fate/p/4760156.html 今天博主有一些Bug调试的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. X ...

  4. Spring pom.xml配置

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  5. Codeforces 1137B(kmp next数组构造)

    为了物尽其用,Next求出最多有哪部分能重复使用,然后重复使用就行了-- const int maxn = 5e5 + 5; char s[maxn], t[maxn]; int cnts0, cnt ...

  6. Docker 部署mysql

    目录 Docker 部署mysql 步骤 1.查找 Docker Hub 上的 MySQL 镜像 2.docker pull mysql 拉取镜像 3.运行容器 4.查看容器启动情况 使用命令备注 D ...

  7. 关于.NET .cs后台提示并进行页面跳转代码

    在后台.CS页面中植入下面代码 string url = "<script>alert('xxx');window.location.href='"xxx.html&q ...

  8. LN : Eden Polymorphic And OOP Design Pattern Abstract Factory

    Appreciation to our TA, +7, who designed this task. Client.cpp #include <iostream> #include &l ...

  9. 洛谷[LnOI2019]长脖子鹿省选模拟赛t1 -> 快速多项式变换

    快速多项式 做法:刚拿到此题有点蒙,一开始真没想出来怎么做,于是试着去自己写几个例子. 自己枚举几种情况之后就基本看出来了,其实本题中 n 就是f(m)在m进制下的位数,每项的系数就是f(m)在m进制 ...

  10. 字符串、String等转换

    (1) String 转换为字符串 例:String s = "abcde";char[] a = s.toCharArray(); (2) 字符串转换为Stringchar[] ...