touch-action css属性 滚动和缩放手势
2024-10-20 02:09:23
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;
最新文章
- 【javascript激增的思考03】MVVM与Knockout
- CF 22B. Bargaining Table
- mybatis 返回null 及 参数说明
- 分享 Java微信开发SDK
- js浏览器键盘事件控制(转自新浪微博)
- (Error) The type AESKeyGenerator is not accessible due to restriction on required library.
- Linux LVM 扩展磁盘分区
- HLJOJ1015(多源最短路径失真)
- PHP Version之PHP5.2.x到5.3.x
- Android简单发送邮件（可带附件）
- HMM 前向后向算法（转）
- TensorFlow Object Detection API（Windows下测试）
- How tomcat works 读书笔记十五 Digester库 上
- AWS云使用100条宝贵经验分享
- 20154305 齐帅 PC平台逆向破解
- Kafka 0.8 Controller设计机制和状态变化
- 为已编译的DLL附带强命名
- dataGridViewX操作
- 03JavaScript 输出
- JavaScript 页面间传值