由此找了其他的属性值 发现还挺强大的 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; 默认情况下,平移(滚动)和缩放手势由浏览器专门处理。...html { touch-action: manipulation; }
前言 相信大家搜css touch-action很容易搜到一批文章,但感觉自己还是需要写下自己这这个过程中的一些探索经历。...使用css touch-action的原因 在其官方的说明中:是否,以及以何种方式,给定的区域,可以由用户通过触摸屏操作(例如,通过平移或缩放内置的浏览器功能) 但我最初并不是因为这个来使用它的,...这个就要看下touch-action的更官方的触摸说明了。 默认情况下,平移(滚动)和捏手势由浏览器独占处理。...文档参考来源:touch-action 说人话 这段话阐明的就是触摸事件整个的进行过程,既然它可以通过css来约定滚动的行为,那么就意味着你写了touch-action:none,就会导致原来的页面滚动失效了...更多延伸与拓展 通过touch-action可以做什么效果呢?
确实不可以,但移动端则有另外一个特殊属性具有异曲同工之处,那就是 touch-action。...顾名思义,该属性是用于设置触摸屏如何操纵元素区域动作,同样的,touch-action 可以禁用浏览器在移动端处理手势的事件,进而提高页面滚动性能,同时它还能解决移动端 点击延迟问题(很多人可能只知道viewport...全局生效要写在 html 上:html { touch-action: manipulation;}类似的,如果移动端有自定义拖动的需求,也可以用这个 CSS 来优化性能,当我们需要完全阻止原生touch...事件时JS设置 touch-action 为 none,不需要再还原即可。...还有很多可选值相关资料传送门: MDN - CSS - pointer-events MDN - CSS - touch-action 以上就是文章的全部内容,希望对你有所帮助!
根据规范,CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如,浏览器内置的缩放功能)。...touch-action 默认值是 auto,当设置为 none 时会禁止用户缩放,能成功解决 300ms 延迟的问题,如: a[href], button { touch-action: none...2014年3月13日,W3C 规范增添了新的 touch-action 属性值 manipulation。...touch-action: manipulation 规定浏览器只允许进行滚动和持续缩放操作。任何其它被 touch-action: auto 支持的行为不被支持。...代码如下: html { touch-action: manipulation; } 从此,移动端点击事件延迟正式宣告消亡。
css 处理 只要在页面上使用css样式 touch-action: none,就能禁止web在手机或平板上的缩放了。... 注意: 使用 touch-action: none 作用于html元素上,可以禁止页面缩放,因为该样式属性是非继承属性,不会影响页面子元素的手势操作...如果使用 * {touch-action: none;} 全局作用,则会影响子元素的各种手势操作。...] | manipulation; touch-action 属性值 auto 当触控事件发生在元素上时,由浏览器来决定进行哪些操作,比如对viewport进行平滑、缩放等。...方法一:使用 touch-action 样式来禁止垂直平移的默认行为 touch-action: pan-y; 方法二:监听 touch事件 中,明确设置 passive 为 false,声明不是被动的
touch-action CSS的touch-action属性用于设置触摸屏用户如何操纵元素的区域...touch-action:none; /* 浏览器兼容性 https://caniuse.com/#search=touch-action */ FastClick FastClick是FT Labs专门为解决移动端浏览器
可以通过在意外滚动发生的元素上添加CSS属性touch-action: none 来阻止滚动发生。继续阅读,你可以了解到更多相关技术的细节。...我们发现大量受影响的页面,通过使用touch-action这个CSS属性就能轻松修复(问题)。...如果你希望某个元素(无论进行任何 touch 操作都)不会使浏览器发生滚动或缩放,可以往该元素的CSS中加入touch-action: none。...如果想某个元素只可以水平滚动或缩放,可以使用touch-action: pan-y pinch-zoom。...开发者在需要时,应该在 touch 系列事件发生前,使用touch-action这一 CSS 属性去阻止某元素滚动或缩放。
其中有一个和点击延迟直接相关的实现 —— 一个名为 touch-action的新 CSS 属性。根据规范,touch-action 属性决定 “是否触摸操作会触发用户代理的默认行为。...touch-action的默为 auto,将其置为 none 即可移除目标元素的 300 毫秒延迟。...Polymer 则是通过判断标签上的 touch-action属性 (attribute),而非 CSS 代码。 这对于我们开发者来说意味着什么?...然而,你若只想寻求一个解决 300 毫秒点击延迟的方法,上述方案可能就有点过了,因为它们要么是资源密集型的方案,要么是touch-action属性的非标准化模拟。...指针事件和css touch-action:新属性,可能存在浏览器兼容问题,如仅为解决点击延迟问题儿引入一整套指针事件有点过了。
注册处理函数时,用如下方式,明确声明为不是被动的 window.addEventListener('touchmove', func, { passive: false }) 2、应用 CSS 属性 touch-action...touch-action 还有很多选项,详细请参考touch-action [注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true
4、IE11+浏览器设置了css的属性touch-action: manipulation,它会在某些标签(a,button等)禁止双击事件,IE10的为-ms-touch-action: manipulation...更改默认视口宽度 `` 缺点: 需要浏览器的支持 3. css touch-action...touch-action的默为 auto,将其置为 none 即可移除目标元素的 300 毫秒延迟 缺点: 新属性,可能存在浏览器兼容问题 4. tap事件 zepto的tap
注册处理函数时,用如下方式,明确声明为不是被动的 window.addEventListener(‘touchmove’, func, { passive: false }) 2、应用 CSS 属性 touch-action...touch-action 还有很多选项, 详细请参考:touch-action 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。
{ padding: 0 50px 40px; background-color: #fff; position: fixed; z-index: 999; } ✅ 解决方案A (touch-action...) 默认情况下,平移(滚动)和缩放手势由浏览器专门处理,但是可以通过 CSS 特性 touch-action 来改变触摸手势的行为。...摘取几个 touch-action 的值如下。 值 描述 auto 启用浏览器处理所有平移和缩放手势。 none 禁用浏览器处理所有平移和缩放手势。....popup { touch-action: none; } Note: [无障碍设计] 阻止页面缩放可能会影响视力不佳的人阅读和理解页面内容,不过小程序本身好像就不可以缩放!
如果我们不想这个时候整个页面进行滚动,就可以设置 overscroll-behavior-x: contain; 在内部的盒子中 缺点的话,就是浏览器的兼容性并不是特别理想,但对于我们 TOB 的项目来说是足够的了 其他:touch-action...这个方案是基于移动端开发的,实际上跟这次谈论的还是有点区别,这里单纯记录一下 MDN 中对 touch-action[4] 的解释如下 CSS 属性 touch-action 用于设置触摸屏用户如何操纵元素的区域...developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior-x [3]Demo 地址: https://codepen.io/gpingfeng/pen/eYgRNqX [4]touch-action...: https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action [5]overscroll-behavior: https://css-tricks.com
原因是他在全局设置了 touch-action这个属性为none。 CSS中,touch-action主要用来设置对一个区域的触摸行为可以有哪些操作,比如:缩放、平移、滚动等。...默认情况下,touch-action属性的值为auto,当设置为none时,我们触摸屏幕时不进行任何操作,所以页面就无法滚动。...当然touch-action还可以设置为其他值,比如: pan-x:启用单指水平平移手势。 pan-y:启用单指垂直平移手势。 manipulation:浏览器只允许进行滚动和持续缩放操作。 等。
left: 0; right: 0; bottom: 0; margin: auto; touch-action.../js/pep.js">
Authors can also opt in to fast-tap behavior on specific elements by using the CSS touch-action property
(可以讲一下pointer-events和touch-action属性吗) 问题解答 1.mouseover和mouseenter两个事件有什么区别?...(可以讲一下pointer-events和touch-action属性吗) css3中有两个属性是可以直接影响到JS中的事件的,他们是pointer-events和touch-action。...touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动、缩放等)。
webkit-appearance: button; cursor: pointer; display: inline-block; text-align: center; vertical-align: middle; touch-action
CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如,浏览器内置的缩放功能)。...最简单方法是: html{ touch-action: none; touch-action: pan-y; } 还可以直接指定对应元素的宽度和overflow: html{ width: 100vw
height:200px;') canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action
领取专属 10元无门槛券
手把手带您无忧上云