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. PyCharm的一些使用技巧

    定位到函数定义 在函数名处 Ctrl + B 就会快速定位到函数定义处 在Console中执行文件 全选内容后,右键菜单 Execute Selection in Console 或者快捷键 Alt ...

  2. [Xcode 实际操作]九、实用进阶-(9)陀螺仪设备的使用

    目录:[Swift]Xcode实际操作 本文将演示陀螺仪设备的使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //导入需要用到的C ...

  3. 机智云连接ESP8266--远程控制点亮RGB灯

    概述 智能灯,是一个简单常见的智能产品,硬件电路简单,程序本身也不复杂:下面我们使用esp8266开发板和机智云云端,实现如何将一个传统的灯泡,改造成可以远程控制开关的智能灯. 1.准备工作 硬件: ...

  4. AOP 应用

    AOP 的核心:解耦 1. 权限认证2. 事务3. 日志4. Lazy loading 懒加载5. Context Process 上下文处理6. Error Handler 错误追踪(异常捕获)7. ...

  5. jvm 字节码查看

    javap -c -v HelloWorldDemo.class >HelloWorld.txt

  6. socket模拟服务器,客户端下载东西(ftp)

    服务端(ftp_server.py) import hashlib,socket,os server = socket.socket() server.bind(("localhost&qu ...

  7. [题解](最短路(树))luogu_P5201_short cut

    一开始想着最短路时统计一下到每个点的牛数量,但是没写出来 建最短路树是个不错的想法,正常跑一次最短路,枚举每个点的前驱,如果d[y]==d[x]+w就是树上的一条边,优先连编号小的, 建好树以后做一次 ...

  8. Django (十) 项目部署 1

    阿里云部署项目 1, 购买阿里云ECS云服务器(可免费试用1个月) 2, 阿里云实例更换为Ubuntu 3, 安全组配置 4, xshell远程连接 5, 创建虚拟环境: 5.1 linux基本命令 ...

  9. [JLOI2016]圆的异或并

    Description 在平面直角坐标系中给定N个圆.已知这些圆两两没有交点,即两圆的关系只存在相离和包含.求这些圆的异或面积并.异或面积并为:当一片区域在奇数个圆内则计算其面积,当一片区域在偶数个圆 ...

  10. ecshop如何增加多个产品详细描述的编辑器

    在做商产品详情的时候,经常会有选项卡类似的几个产品说明,如:商品详情,商品规格,参数列表,售后服务等. Ecshop后台里面默认只有一个编辑框(器),那么我们还得自己添加几个,以下是ecshop如何增 ...