[译]使用pointer-events:none实现60fps滚动 (2014.1.4更新)
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

原文: http://www.thecssninja.com/javascript/pointer-events-60fps

译者: 这坨越发不逊的螃蟹有双趿拉板子

译者注:

英文水平有限.. 翻译要是有不当的地方.. 还请见谅. 另, 技术比较渣. 希望没有翻译错误的, 免得误人子弟... orz


更新: 2014.1.4 看到张鑫旭发的一篇文章.

http://www.zhangxinxu.com/wordpress/2014/01/pointer-events-none-avoiding-unnecessary-paints .. 直接技能GET的事儿, 果然很扯.. 受教了….


不久之前Paul Lewis发表了一片有趣的文章, 通过禁用用户滚动页面时触发的 hover 效果来避免不必要的重绘 - 《avoiding unnecessary paints》. 下边是通过一个父级的class来管理hover状态

.hover .element:hover {
    box-shadow: 1px 1px 1px #000;
}

这个方法的伸缩性并不特别好, 它在你的css中创建了一些特殊的样式.

这个方法的关键点是, 在页面滚动的时候, 将 .hover 这个class从body中移除. 于是, 在滚动停止之前, 所有设置了 .hover 的元素都不会应用到这个样式. 当滚动结束之后, 再将 .hover 添加回去.

Christian Schaefer

译者注:

上图中相关的链接(自备梯子)

@paul_irish, @derSchepp, @tabatkins, crbug.com/317007

这个方案中的pointer-events属性

这是一个相对更好的办法, 对于设置了 pointer-events: none 属性的元素来说, 鼠标会直接经过这个元素而不触发事件. 看下下边这个录制的视频, 展示了禁用 hover 产生的效果. (译者注: 意译了…)

http://www.youtube.com/watch?v=IyHb0SJms6w (译者注: 自备梯子..)

我们已经知道了这种方案的好处, 但是还没有介绍它的可维护性和一些特殊的问题

.disable-hover {
    pointer-events: none;
}

所有我们需要做的就是在用户开始滚动页面的时候, 给body添加 .disable-hover. 这个操作可以让鼠标经过元素的时候禁用hover效果.

var body = document.body,
    timer;

window.addEventListener('scroll', function() {
    clearTimeout(timer);
    if(!body.classList.contains('disable-hover')) {
        body.classList.add('disable-hover')
    }

    timer = setTimeout(function(){
        body.classList.remove('disable-hover')
    },500);
}, false);

这个代码很简单, 首先我们清除计时器, 这在滚动操作初始化的时候很重要, 检测body上是否已经添加了禁用hover的class, 然后设置定时器, 以便在用户停止滚动操作的时候移除这个class. 定时器时长至少500ms.

一个更加完善的方案

当前, 给body添加pointer-events属性能够满足绝大多数场景下工作正常, 但是如果子元素设置了pointer-eventes: auto, 这会覆盖父元素的属性, 然后导致滚动的时候页面闪动.

.disable-hover,
.disable-hover * {
    pointer-events: none !important;
}

一个简单的解决方案是使用星号选择器, 并且添加 !important 属性. 从而保证子元素的pointer-events属性是设置成’none’的.

可以自己看下这个测试用例, 然后记录下timeline, 看看这个简单的技术获得的性能提升.

评论
发表评论
暂无评论
WRITTEN BY
这坨越发不逊的螃蟹有双趿拉板子
做一坨强大的好人. 发奋ing. “Something changed, we changed, I changed, and then I realized that something's never change. Right ?” - CURFEW
TA的新浪微博
PUBLISHED IN
螃蟹.monk的专栏

翻译点文章, 发布点个人的原创...

我的收藏