touch-action css属性 滚动和缩放手势
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属性 滚动和缩放手势的更多相关文章
- CSS 属性:touch-action
CSS 属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动.缩放等). /* Keyword values */ touch-actio ...
- CSS属性一览
CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...
- CSS属性定义 文本修饰 边框效果 背景修饰
一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...
- 值得注意的CSS属性
文本TEXT letter-spacing 字符间距 word-spacing 字间距 line-height 行高 text-decoration 修饰(下划线) text-indent 首行缩进 ...
- 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 可以把 ...
- 缩放手势 ScaleGestureDetector 源码解析,这一篇就够了
其实在我们日常的编程中,对于缩放手势的使用并不是很经常,这一手势主要是用在图片浏览方面,比如下方例子.但是(敲重点),作为 Android 入门的基础来说,学习 ScaleGestureDetecto ...
- css属性、样式、边框、选择器
CSS 层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言, 用来描述 HTML或 XML(包括如 SVG.MathML.XHTML 之类的 XML 分 ...
随机推荐
- Mol Cell Proteomics. |胡丹丹| 雷公藤红素通过SIRT1-FXR 信号通路保护胆汁淤积性肝损伤
期刊:Mol Cell Proteomics 题目:Celastrol protects from cholestatic liver injury though modulation of SIRT ...
- bzoj1726:[Usaco2006 Nov]Roadblocks 次短路
Description 贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她的旅途,于是她每次回农场,都会选择第二短的路径,而不象我们所习惯的那样, ...
- Log4j2 - Unable to invoke factory method in class org.apache.logging.log4j.core.appender.RollingFileAppender for element RollingFileAppender for element RollingFile
问题与分析 在使用Log4j2时,虽然可以正确读取配置文件并生成log文件,但偶然发现控制台打印了异常信息如下: 2018-12-31 17:28:14,282 Log4j2-TF-19-Config ...
- IDEA 快捷键MacOS
Alt + Enter 导入包,自动修正 Command + N 查找类 Command + Shift + N查找文件 Command + Alt + L格式化代码 Command + Alt + ...
- text() html() empty()
text() 获取中间的文本 不包括标签 html() 获取标签中间的东西 包括标签 与text()是有区别的 empty() 清空标签 ...
- AKOJ-2021-逆序对(归并,二分)
链接:https://oj.ahstu.cc/JudgeOnline/problem.php?id=2021 题意: 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们 ...
- Spring的ioc(DI)复习概念和原理简介
IOC的好处 ioc或者说di的概念很显然了,反转控制和依赖注入,那本来直接new就行的东西,为什么要搞这么复杂呢?? 开发维护方便,高层设计不用依赖底层的,不然底层一个类改下构造器,高层就全要改,因 ...
- mongodb sort
sort() 方法 要在 MongoDB 中的文档进行排序,需要使用sort()方法. sort() 方法接受一个文档,其中包含的字段列表连同他们的排序顺序.要指定排序顺序1和-1. 1用于升序排列, ...
- iOS Runloop 消息循环
介绍 Runloop是一种事件监听循环,可以理解成一个while死循环,监听到事件就起来,没有就休息. Runloop可以在不同模式下进行切换,iOS有五种模式,其中UIInitializationR ...
- 在Eclipse上运行Spark(Standalone,Yarn-Client)
欢迎转载,且请注明出处,在文章页面明显位置给出原文连接. 原文链接:http://www.cnblogs.com/zdfjf/p/5175566.html 我们知道有eclipse的Hadoop插件, ...