网站首页> 前端开发> Html/CSS> 学会一行CSS即可提升页面滚动性能

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

时间:2022-08-22 20:16:45 阅读:221次 来源:互联网

一般情况下 CSS 并不会影响 JS 事件,但有一个 CSS 属性则比较特殊,那就是 pointer-events,它可以用来规避鼠标事件,其中大部分属性值只适用于 SVG(可缩放矢量图形)操作。接下来要介绍的重点是其 none 属性值,该值表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

我们经常会碰到类似设置半透明遮罩的需求,通常是绝对定位一个div盖在元素上方,这时遮罩层的鼠标事件优先级会更高,使得打上遮罩的元素无法进行正常交互行为,此时只需给遮罩设置 pointer-events: none; 即可"穿透"遮罩与元素交互。

既然该属性可以阻止元素成为鼠标事件,那么修改页面该属性值为 none,就能避免在滚动时鼠标频繁触发包括hover在内的任何鼠标事件,从而提升了页面滚动时的性能。

body {
  pointer-events: none;
}

使用滚动监听事件可实现灵活控制:

let timer = null
window.addEventListener("scroll", function () {
    document.body.style.pointerEvents = 'none'; // 滚动时禁用鼠标事件
    if (timer) { clearTimeout(timer) }
    timer = setTimeout(() => {
        document.body.style.pointerEvents = 'auto'; // 释放
    }, 100);
})

如果是移动端网页,没有鼠标事件是不是就不能用上面的属性来优化滚动了呢?确实不可以,但移动端则有另外一个特殊属性具有异曲同工之处,那就是 touch-action

顾名思义,该属性是用于设置触摸屏如何操纵元素区域动作,同样的,touch-action 可以禁用浏览器在移动端处理手势的事件,进而提高页面滚动性能,同时它还能解决移动端 点击延迟问题(很多人可能只知道viewport meta标签,或fastclick)。不过需要注意的是,虽然该属性也有 none 值,但在这里并不适用,因为"滚动"也属于手势的一种,应该使用 manipulation 这个值,意为只允许进行滚动和持续缩放操作,也就相当于禁用了其他页面手势。

全局生效要写在 html 上:

html {
  touch-action: manipulation;
}

类似的,如果移动端有自定义拖动的需求,也可以用这个 CSS 来优化性能,当我们需要完全阻止原生touch事件时JS设置 touch-actionnone,不需要再还原即可。

// 在需要时主动触发对全局的手势禁用
document.documentElement.style.touchAction = 'none'
// 或者独立禁用某一片区域的手势操作
document.getElementById('xxx').style.touchAction = 'none'
// 不需要时还原,例如在抬手事件中处理
document.addEventListener('touchend', function (event) {
    document.documentElement.style.touchAction = 'manipulation' // 或 auto
});

可能有的朋友就会问了,如果我们在 touchstarttouchmove 事件中用 event.preventDefault() 阻止系统默认事件,不就可以阻止手势操作吗?

preventDefault()能阻止默认事件,当然包括手势事件,但是如果在 windiw document body 这些地方直接使用,不仅没有效果,浏览器还会出现红字严重报错,这是因为 touch 监听事件都是先进行了"触摸"才能执行回调,如果需要阻止默认事件,那么就必须在触摸开始前就检查是否需要阻止,滑动响应的优先级反而降低了,Google为了保证滑动流畅性就默认取消了这一机制。
所以从 chrome56 开始,如果你在全局 touch 事件中不声明这是"非被动"操作,那么chrome浏览器会默认不执行并报错。

window.addEventListener('touchmove', e => e.preventDefault()) // 无效,并报错
window.addEventListener('touchmove', e => e.preventDefault(), { passive: false }) // 有效

而这个时候 touch-action 就发挥作用了,它相当于先声明了元素的可用触摸事件,这样浏览器就不会报错了,preventDefault() 也不会影响到触摸的事件,这两者可以结合来使用。(touch-action: none 会阻止任何触摸行为,但 touch 事件是正常触发的)

// 以下代码效果:在滑动时阻止系统默认事件,且页面可以正常滑动
document.documentElement.style.touchAction = 'manipulation'
window.addEventListener('touchmove', e => e.preventDefault())
// 将 manipulation 值改为 none,就可以完全阻止滑动默认事件,看情况来,毕竟 touch-action 还有很多可选值


本文地址:https://www.manongw.com/article/377.html

文章来源:转载于掘金,转载网址为https://juejin.cn/post/7134648288925450248

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了HTML中图片不存在显示默认图片的方法示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-18 17:07
  • 本文主要介绍了css3字体缩放样式-webkit-text-size-adjust的用法详解的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:46
  • 本文主要介绍了HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-19 21:50
  • 本文主要介绍了Html中使用自定义图片来实现checkbox显示的方法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-18 17:13
  • 本文主要介绍了HTML+CSS相对宽度和绝对宽度冲突时的div解决方法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-19 21:54
  • 本文主要介绍了text-size-adjust属性的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:41
  • 本文主要介绍了浏览器全屏显示背景图片的css样式与html结构的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-18 17:16
  • 本文主要介绍了display属性详解的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:48
  • 本文主要介绍了CSS3中::-moz-focus-inner用法详解的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:59
  • 本文主要介绍了详解css3 flex弹性盒自动铺满写法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-27 00:00