(Chrome bug?)pointer-events : none，阻止在Chrome Android 78上向下滚动

pointer-events: none 是CSS属性，用于控制元素是否响应鼠标或触摸事件。当将该属性设置为none时，元素将不会接收任何鼠标或触摸事件，事件将会穿透到元素下方的其他元素。

在Chrome Android 78上，有一个已知的bug，当在某些情况下使用 pointer-events: none 时，会导致在元素内部滚动时无法向下滚动。这个bug可能会影响一些特定的移动网页或应用程序。

解决这个问题的方法是使用其他方式来实现元素的不可点击效果，例如使用透明背景或其他CSS技巧来模拟禁用状态。另外，可以尝试更新Chrome浏览器版本或等待Chrome团队发布修复该bug的更新。

关于指定的腾讯云产品和产品介绍链接地址，由于要求不能提及具体品牌商，我无法提供相关链接。但是，腾讯云提供了丰富的云计算产品和解决方案，您可以访问腾讯云官方网站，了解更多关于云计算的信息和相关产品。

相关·内容

pointer-events用法

阻止用户的点击动作产生任何效果；阻止缺省鼠标指针的显示；阻止CSS里的hover和active状态的变化触发事件；阻止JavaScript点击动作触发的事件；来看一下的都有哪些属性 ---- pointer-events...默认值：auto 适用于：所有元素继承性：有动画性：否计算值：指定值 ---- 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。...如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。...当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。对应的脚本特性为pointerEvents。...IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome 11+ 3.6＋ 4.0+ 6.0+ 15.0+ 6.0

1.3K3 0

学会一行CSS即可提升页面滚动性能

重点来了，既然该属性可以阻止元素成为鼠标事件，那么修改页面该属性值为 none，就能避免在滚动时鼠标频繁触发包括hover在内的任何鼠标事件，从而提升了页面滚动时的性能。...body { pointer-events: none;}使用滚动监听事件可实现灵活控制：let timer = nullwindow.addEventListener("scroll", function...全局生效要写在 html 上：html { touch-action: manipulation;}类似的，如果移动端有自定义拖动的需求，也可以用这个 CSS 来优化性能，当我们需要完全阻止原生touch...所以从 chrome56 开始，如果你在全局 touch 事件中不声明这是"非被动"操作，那么chrome浏览器会默认不执行并报错。...（touch-action: none 会阻止任何触摸行为，但 touch 事件是正常触发的）// 以下代码效果：在滑动时阻止系统默认事件，且页面可以正常滑动document.documentElement.style.touchAction

3.1K3 0

控制页面的滚动:自定义下拉到刷新和溢出效果

当用户点击滚动边界时，某些应用可能希望提供不同的用户体验 ? （在Chrome Android上滚动链接）拉到刷新效果拉到刷新是一种直观的手势，通过Facebook和Twitter等移动应用推广。...事实上，这种特殊用户体验非常流行，以至于Android这样的移动浏览器都采用了相同的效果。向下滑动页面顶部会刷新整个页面 ? ?...滚动不会传播给祖先，但会显示节点内的本地效果。例如，Android上的滚动滚动效果或iOS上的橡皮筋效果，它会在用户点击滚动边界时通知用户。...注意：使用overscroll-behavior：包含html元素可防止超滚动导航操作 none - 与包含相同，但它也可以防止节点本身内的超滚动效果（例如，Android超量滚动发光或iOS橡皮圈）...阻止JavaScript点击动作触发的事件在许多网站上过节的时候页面最上层会用canvas绘制的雨、雪花，避免这些悬浮物遮挡住页面从而影响鼠标点击，可以使用pointer-events=none

3.2K2 0

jimojianghu

在以前，如果要禁止移动端设备的触摸屏上，手指缩小放大的功能，都会想到使用viewport 来处理。...此外，对 document 处理了滚轮事件后，因为该事件会传播冒泡，所以需要注意页面上其他的子元素——如果有滚动条之类的，需要在子元素上阻止冒泡，不然后滚动会失效。...请注意，滚动向上（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。...但需要注意滚轮默认事件，如会导致子元素滚动失效，这时候就要在子元素上阻止相同事件冒泡。...passived 实际上就是告诉浏览器，某个事件监听是否会使用 preventDefault 来阻止默认行为，便于浏览器优化性能。特别是浏览器优化页面滚动时的性能，可以让页面滚动更顺滑。

3.7K0 0

这一次，彻底解决滚动穿透

什么是滚动穿透如图所示，有一层遮罩蒙层覆盖在body上时，当我们滚动遮罩层，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。...阻止冒泡？刚开始遇到这个问题的同学可能会联想到是不是由于事件冒泡到body上引起的，于是监听 scroll/touchmove事件，阻止事件冒泡。事实上，这并没有什么卵用。...由此可见，滚动穿透问题其实并不是一个浏览器的bug（虽然在ios下fixed定位确实会导致很多bug），它是完全符合规范的，滚动的原则应该是 scrollforwhat can scroll，不应该因为某个元素的...在仔细进一步的定位下，最终确定罪魁祸首原来是： passive event 我们知道，chrome 51引入了 passiveeventlisteners以提高滚动性能，同时它也合入了标准，具体可查看chrome...在Android的手q和微信中使用的是X5内核，它是基于blink内核的，因此同样有关于 passiveevent的优化。

2.3K2 1

移动端爬坑记 --- （1）布局与样式上的奇葩偶遇

有些android不带这个很奇葩【错乱】，且不要使用margin:0 auto【作用于子元素】在滚动包裹层添加这么一条私有前缀样式即可享受类似APP的滑动效果，不仅丝滑，还带弹性！...IOS滚动窗滑动到底部还能弹窗拖拉的奇葩修复这个方案是通过计算离底部多远加状态来阻止touch事件 // 防止内容区域滚到底后引起页面整体的滚动 var content = document.querySelector...// 底位表示向下滚动 // 1容许 0禁止 var status = '11'; var ele = this; var currentY = e.touches...'10' : '01'; // 操作方向和当前允许状态求与运算，运算结果为0，就说明不允许该方向滚动，则禁止默认事件，阻止滚动 if (!...',fn,false); 页面高度渲染错误 document.documentElement.style.height = window.innerHeight + 'px'; 怪异悬浮的表单在部分android

871 0

让 touch 系列事件触发的滚动响应更快

在极个别例子下，这会导致意外的滚动。可以通过在意外滚动发生的元素上添加CSS属性touch-action: none 来阻止滚动发生。继续阅读，你可以了解到更多相关技术的细节。...2背景如果你在touchstart或touchmove事件处理函数中调用preventDefault()，这将会阻止（页面）滚动。...下图展示了用户触发滚动后到真正滚动期间，耗时最长的前百分之一案例中所耗费的时间。这些数据是由安卓上的 Chrome 访问任意网页后采集的。...4问题与修复大部分情况下，（我们的优化）不会导致任何 BUG 。但是如果 BUG 真的出现了，最常见问题是当你不希望页面发生滚动时却发生了。...开发者在需要时，应该在 touch 系列事件发生前，使用touch-action这一 CSS 属性去阻止某元素滚动或缩放。

9002 0

移动开发实用

通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动 touchend 当手指离开屏幕时触发 touchcancel 系统停止跟踪触摸时候会触发。...通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动MSPointerUp——当手指离开屏幕时触发移动端click屏幕产生...原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...{display: none} android 2.3 bug @-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉 after和before伪类无法使用动画 border-radius...silk && os.android && ua.match(/Kindle Fire/)) browser.silk = true if (chrome) browser.chrome = true

6.4K3 0

怎么用css属性屏蔽鼠标事件(鼠标点击可穿透上层元素)

poniter-events属性的值很多，但大部分和svg有关直接跳过，通用的属性值有两个none | auto。 auto：与 pointer-events 属性未指定时的表现效果相同。...none：该元素永远不会成为鼠标事件的 target。...但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。...再关注下poniter-events的兼容情况：桌面浏览器 IE：11+（IE6~IE10均不支持） Firefox：3.6＋ Chrome：4.0+ Safari：6.0 Opera：15.0...移动设备浏览器 iOS Safari：6.0 Android Browser：2.1+ Android Chrome：18.0+ 看到这里，基本上就能解决我这次所遇到的问题了：解决完问题

1.7K2 0

JS 阻止页面滚动

在升级到 ios11.3 系统后，阻止页面滚动的代码 e.preventDefault 代码失效了。...) }, {passive: false}); //passive 参数不能省略，用来兼容ios和android 如果不加 passive:false; 在 ios 上是不能起作用的。...解释微信在 Android 端和 IOS 端使用的不是同样的浏览器内核： Android 版微信浏览器：QQ浏览器 X5内核（相当于使用的 Chrome） IOS 版微信浏览器：WKWebView...所以 Safari 中默认使用了 passive:true，告诉浏览器，此监听事件中，不会阻止默认的页面滚动。...即可实现阻止移动页面滚动的功能。

22.9K5 0

12 个实用的前端开发技巧总结

就是因为 img 隔绝了 click 的穿透，而我们希望的是，这个 img 只是视觉上遮挡了 input 的样式，但是点击的时候还是点击到 input。所以，只要让 img 可穿透即可。...css 代码如下： img { pointer-events: none; } 2....直接修改 select 的样式的时候，一个奇怪的现象出现了，在 chrome 上调试的时候，自己定义的样式起了作用，在 Android 手机上也起了作用，但是到了 ios 手机上就不行了，典型的不兼容问题...开启弹性滚动 css 代码如下： body { overflow: scroll; -webkit-overflow-scrolling: touch; } 注意：Android 不支持原生的弹性滚动...在输入框输入完内容并按回车的时候进行判断比如说输入完 11000 在按下回车的时候。

1.1K2 0

📚一站式解决：H5开发全攻略，看这篇让你省时又省力

*/ } ⭐️⭐️禁止滚动传播使用overscroll-behavior: contain属性可以阻止滚动传播的问题。...属性，可以阻止用户在旋转屏幕时浏览器自动调整字体大小。...属性：通过设置 pointer-events: none，可以让鼠标点击事件失效，从而解决点击穿透问题。....element { pointer-events: none; } ⭐️⭐️⭐️⭐️⭐️1px 问题现象在 H5 页面中，可能需要设置边框宽度为 1px，但在 Retina 屏幕上，1px...在需要锁定滚动的情况下，给 document 添加 touchstart 和 touchmove 事件的监听器，通过捕获触摸滑动事件，并根据情况阻止默认行为，从而避免滚动穿透。

3552 0

css 常用代码分享

去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框 input,button,select,textarea{ outline:none;}textarea{ font-size...pointer-events:none; 6....progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1); } 7. firefox 阻止选中...left: 0;border-width:20px;border-style:solid;border-color:#d1ddde transparent transparent #d1ddde; ie6 bug...取消chrome form表单的聚焦边框： input,button,select,textarea{outline:none}textarea{resize:none} 11.

8460 0

一周新姿势第2期

兼容性：浅绿 = 支持红色 = 不支持粉色 = 部分支持 Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android...在svg内容上与visiblepainted值相同。 none：元素永远不会成为鼠标事件的target。...但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。其他值只能应用在SVG上。...兼容性：浅绿 = 支持红色 = 不支持粉色 = 部分支持 Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android...，此时产品大人再给你来个在这个iframe上不允许进行任何操作，这个时候呢，pointer-events这个属性就可以完美的解决你的困惑。

4803 0

移动端touch事件无视disabled属性转

使用chrome审查元素，找啊找，发现了这个： ? 对，就是这个神奇的pointer-events属性！...我们来看一下mdn上怎么说的： The CSS property pointer-events allows authors to control under what circumstances (...设置pointer-events:none的元素，将不会成为事件目标。...但是如果其子孙元素设置了pointer-events:auto，该子孙元素仍然可成为事件目标，并且如果该事件支持冒泡，其设置了pointer-events:none的祖先元素，也会由于冒泡触发相应的监听事件...又是IE拖后腿了囧，不过移动端表现良好~ 总结 pointer-events这个CSS3属性，在移动端我们基本可以“放肆”的使用，在你需要禁用某个元素事件或某个区域事件的时候，可以考虑下这个属性，简单高效

2.2K2 0

前端高性能滚动 scroll 及页面渲染优化

本文主要想谈谈页面优化之滚动优化。主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。...pointer-events: none 可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的 hover 效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。...对 body 元素应用 pointer-events: none ，禁用了包括 hover 在内的鼠标事件，从而提高滚动性能。 ?...上面说 pointer-events: none 可用来提高滚动时的帧频的这段话摘自 pointer-events-MDN ，还专门有文章讲解过这个技术：使用pointer-events:none实现...没有，张鑫旭有一篇专门的文章，用来探讨 pointer-events: none 是否真的能够加速滚动性能，并提出了自己的质疑： pointer-events:none提高页面滚动时候的绘制性能？

2.5K3 0

H5 项目实用

-webkit-touch-callout: none; ---- 10、取消IOS里Button、Input上的默认样式？...---- 20、在Android 上想不显示语音输入按钮，怎么办？...-webkit-scrollbar-corner //边角，两个滚动条交汇处 ::-webkit-resizer //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件...及Android上无法使用，在PC端正常 //2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间 ---- 33、重力感应事件...bug （a）android 2.3 bug //1.

5.2K1 1

【前端性能】高性能滚动 scroll 及页面渲染优化

本文主要想谈谈页面优化之滚动优化。主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。...pointer-events: none 可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的 hover 效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。....disable-hover { pointer-events: none; } 大概的做法就是在页面滚动的时候, 给添加上 .disable-hover 样式，那么在滚动停止之前...上面说 pointer-events: none 可用来提高滚动时的帧频的这段话摘自 pointer-events-MDN ，还专门有文章讲解过这个技术：使用pointer-events:none实现...没有，张鑫旭有一篇专门的文章，用来探讨 pointer-events: none 是否真的能够加速滚动性能，并提出了自己的质疑： pointer-events:none提高页面滚动时候的绘制性能？

1.9K7 0

【No Problem】如何解决 Mac 左右滚动误触返回事件？

“误触”的情况，比如一个编辑表单（宽度很大，可以左右滚动），我填写了很多的内容，在一个表格中左右滚动的时候，返回了前一个页面，我在页面中填了很多的东西就会不见...这会很让我奔溃。...这个边界触发就是滚动到“超过”滚动区域的水平边界时才会触发，我自己称这个为浏览器的滚动溢出行为（我觉得这样容易理解），也就是其实正常的滚动不会触发那我们是不是可以在这个边界上做一些特殊的处理呢？...none 表示相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止。...默认情况下，平移（滚动）和缩放手势由浏览器专门处理。设置 none，当触控事件发生在元素上时，不进行任何操作。...小结 Mac 中左右滚动导致返回的原因是滚动“超过”滚动区域的水平边界，可以使用 JavaScript 在边界条件中阻止事件，也可以通过 CSS 的 overscroll-behavior-x 控制滚动的行为

2K1 0

分享css 填坑常用代码

http://segmentfault.com/a/1190000000362621 CSS 实现 textArea 的 placeholder 换行 6.阻止默认事件...pointer-events:none; 7....DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } 8. firefox 阻止选中...border-width:20px;border-style:solid;border-color:#d1ddde transparent transparent #d1ddde; ie6 bug...取消chrome form表单的聚焦边框： input,button,select,textarea{outline:none} textarea{resize:none}

4843 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云