Ekrem Buyukkaya says:

November 26, 2013 at 3:06 am

Brilliant.

Ekrem Buyukkaya 说：

2013-11-26 3:06

聪明。

Chris says:

November 26, 2013 at 6:04 am

Wonder if there are any side effects…
BTW, the demo works nicely in IE11 too, Shows the same difference in the Performance tab in the new F12 Tools.

Chris 说：

2013-11-26 6:04

不知道有没有其他副作用…
顺便说一句，在IE11浏览器下，通过F12打开性能测试选项卡进行性能测试，出现了同样的差异。

Benz says:

November 26, 2013 at 6:54 am

Jesuz so simple and so powerful – thx!

Benz 说：

2013-11-26 6:54

好简单好强大 – 多谢！

Tyler says:

November 26, 2013 at 8:01 am

Just a note, this won’t work with fullscreen applications that rely on content panels using `overflow: auto`, as `pointer-events: none` on the body element won’t register the scroll events. It appears the pointer-events property needs to be applied to a container within the scrollable area.

Tyler 说：

2013-11-26 8:01

这里要注意下，这个对于内容面板需要使用overflow: auto全屏应用不适用，因为pointer-events: none应用在body元素上的时候不会注册滚动事件。似乎pointer-events属性需要应用在有滚动区域的容器上。

Malte Ubl says:

November 26, 2013 at 9:14 am

Simple, but doesn’t work as well as you think because this approach makes the document unclickable for up to 500ms after scrolling end. Here is an explanation how to fix ithttps://plus.google.com/+MalteUbl/posts/NsyYKenqYNP

Malte Ubl 说：

2013-11-26 9:14

很明显，这厮不会如你所想那般工作。因此，它会让页面在滚动结束后500毫秒内没法点击。这显然会有问题，下面这个可以修复这个问题
https://plus.google.com/+MalteUbl/posts/NsyYKenqYNP.

Chip says:

November 26, 2013 at 11:38 am

Really nice – solves a specific issue we we’re having with hover events firing off while scrolling! The only issue I’m still seeing is the recalcute style (purple) event jumping to 30 fps each time the class is added to the body. I didn’t see the same thing in your video so I’m wondering if I’m doing something wrong.

https://www.dropbox.com/s/jant444jwgo2jep/recalculate%20jump.png

Chip 说：

2013-11-26 11:38

真的很赞！解决了我们滚动时候触发hover事件这个问题。现在我仍不解的唯一问题就是，每次往body添加类名的时候，计算样式(粉色那个)事件立马跳到30帧频。但是，我在你的视频上没有看到同样的现象。我在想是不是我哪里做错了。一张需要爬墙同时可能被删除的图片地址。

Ryan Seddon says:

November 26, 2013 at 12:53 pm

@Chip – Yep @derSchepp has said to set document.body.style directly rather than adding/removing a class to avoid a reflow. I’ll update the article real soon.Also I’d say it’s way less noticable in my video as my DOM structure is a lot simpler than your app you’re trying this in.

Ryan Seddon 说：

2013-11-26 12:53

@Chip – 嗯哪，根据@derSchepp的说法，直接在document.body.style上设置相比添加/删除类名可以避免回流。我待会就更新下文章。
另外，您可能没注意到，我视频中DOM结构要比你尝试的app要简单多。

Chip says:

November 26, 2013 at 2:20 pm

I tested Malte’s idea of adding / removing a cover div and that is working the best for me. Changing the document.body.style still causing a 30fps recalculate, but simply adding / removing a cover div with the following css worked perfect and keeps us at 60fps:

.scroll-cover {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  pointer-events: auto !important;
  z-index: 10000;
}

var body = document.body,
    cover = document.createElement('div');
    cover.setAttribute('class','scroll-cover');

window.addEventListener('scroll', function() {
  clearTimeout(timer);
  body.appendChild(cover);
  
  timer = setTimeout(function(){
    body.removeChild(cover);
  },500);
}, false);

I was able to change the setTimeout to 100 to make clicks more responsive and still keep perf

Chip 说：

2013-11-26 14:20

我试验了Malte关于“添加/移除一个覆盖div”的想法，貌似效果最好。改变document.body.style依旧会导致30fps的重计算，但是很单纯地“添加/移除一个覆盖div”同时使用下面的CSS效果完美，依然保持60fps.

代码略…

我把setTimeout时间改成100毫秒依然效果很赞哦。

Matt Stuehler says:

November 26, 2013 at 3:17 pm

How does this apply to mobile devices (iOS in particular)? Is it at all relevant?

And if it is… what are the implications of using -webkit-overflow-scrolling: touch? That seems to complicate the issue of knowing when the scroll event begins and ends…

Matt Stuehler 说：

2013-11-26 15:17

这个在移动设备上咋整啊（尤其iOS设备）？这个是一方通行的吗？

如果……使用了-webkit-overflow-scrolling: touch又该如何实现？似乎当滚动事件开始于结束的时候，问题变得更复杂了……

Peter says:

November 27, 2013 at 5:58 pm

This looks great! However there’s one thing I don’t understand – you disable pointer events and immediately after show that the hover states still work, before scrolling down the page at 60fps. How did the hover states still work? Were you enabling the JS version not just applying the CSS class? Thanks!

Peter 说：

2013-11-27 17:58

看上去很不错！但我有一事不明——你禁用了pointer events但hover状态在滚动结束后又立即显示出来了。怎么办到的？你是不是JS里面捣腾了葫芦药而不仅仅是应用CSS类名啊？多谢！

sam says:

November 28, 2013 at 5:36 am

Blown away. This is simply brilliant.

sam 说：

2013-11-28 5:36

走起。简直超神了。

Aurelien Foutoyet says:

November 28, 2013 at 8:33 am

Really clever sir.
Thanks for sharing !

Aurelien Foutoyet 说：

2013-11-28 8:33

太聪明了。
多谢分享！

Ryan Seddon says:

November 28, 2013 at 9:07 am

@Peter –

The hover effects are only disabled once you start to scroll so it won’t interfere with hover until then, so that’s why hover still works in the video after I click the disable button.

Ryan Seddon 说：

2012-11-28 9:07

@Peter –

hover效果只在开始滚动的时候禁用，所以此时没有hover相关交互，直到滚动停止。这就是为什么视频中我点击了禁用按钮，hover效果仍然有效的原因。

Ryan Seddon says:

November 28, 2013 at 9:14 am

@Matt – Hover on scroll isn’t really relevant to non mouse based devices as you can’t really trigger a hover. You should really avoid the use of :hover on touch based devices all together as it causes issues.

Ryan Seddon 说：

2013-11-28 9:14

@Matt – 对于无鼠标设备而言，scroll上面的hover实际没有关联的。因为你没法真正触发hover. 如果这导致了某些问题，你应该试着避免在触摸式设备上使用:hover.

Sam Jarvis says:

November 28, 2013 at 7:21 pm

Amazing.

Sam Jarvis 说：

2013-11-28 19:21

震精。

Manumanu says:

November 28, 2013 at 10:42 pm

Great idea. Just wanted to say : IE11 naturally disable pointer events when scrolling. Dunno since which version, ’cause i wasn’t aware of this issue.

Manumanu 说：

2013-11-28 22:42

想法不错。我只想说：IE11在滚动的时候天然禁用pointer events. 但不知道从哪个版本开始，因此这里的探讨的问题我一点也不在意。

Ben Knight says:

November 29, 2013 at 2:57 pm

Great minds think alike!

https://twitter.com/benjamin_knight/status/401829093055791104

Ben Knight 说：

2013-11-29 14:57

英雄所见略同！

https://twitter.com/benjamin_knight/status/401829093055791104

Mathias Bynens says:

November 29, 2013 at 6:09 pm

Instead of document.body, consider applying this to the root element (document.documentElement). That way, it will still work if you use <html> and <body> as a free <div> — e.g. if you apply margin: 0 auto; max-width: 30em; box-shadow: …; to <body>.

Mathias Bynens 说：

2013-11-29 18:09

可不可以应用在根元素上(document.documentElement)，而不是document.body. 这样，即使你把<html>和<body>作为普通的<div>使唤也是可以的。——例如，应用margin: 0 auto; max-width: 30em; box-shadow: …;到<body>上。

newable says:

November 30, 2013 at 12:31 am

Great!

newable 说：

2013-11-30 0:31

赞！

Richard Ayotte says:

November 30, 2013 at 1:30 am

It would be nice if this behaviour was the default in browsers.

Richard Ayotte 说：

2013-11-30 1:30

如果浏览器的默认行为就是这样那就帅气了。

Thierry Koblentz says:

November 30, 2013 at 3:26 am

Hey Ryan,
In my opinion, this is something browsers should be smart enough to do themselves. So it would make sense to me if one already did; IE11 may be? As @Manumanu suggests.

Thierry Koblentz 说：

2013-11-30 3:26

那个，Ryan,
在我看来，这种事情应该让浏览器自己解决。如果有那个浏览器已经做了这件事，对我而言是极好的；可能IE11? 正如@Manumanu提到的。

JosiahS says:

November 30, 2013 at 5:59 am

Interesting idea, but it seems to have the side effect of disabling multi-touch page scrolling on Chrome in Windows 8. (I haven’t tested it anywhere else.)

JosiahS 说：

2013-11-30 5:59

很有意思的想法，但是貌似在Windows 8的Chrome浏览器中有副作用，页面的触屏滚动被禁用掉了（我还没有测试其他任何地方）。

Ron says:

November 30, 2013 at 7:54 am

Any reason why this shouldn’t just be built into Chrome?

Ron 说：

2013-11-30 7:54

有什么理由这不应该被内置到Chrome浏览器？

RS says:

November 30, 2013 at 9:28 am

Echoing poster above, yes brilliant indeed. I’ve got to say, one thing I personally find just annoying is hover effects on images–you know like those with an overlay and some icon–something, anything–showing that it’s a video post, or image post or whatever. But alas, every client wants this garbg! And of course when you’re scrolling down the page, and mouse pointer hits the images/elements then it can be a very unsatisfactory experience.

Thanks for the post!

RS 说：

2013-11-30 9:28

我很赞同上面的文艺，确实很赞。我不得不说，关于hover效果，我一直有件事情耿耿于怀，那就是图片的hover效果，你懂的，经常会出现一个覆盖层，上面有图标以及其他什么东西，告诉你这是个含视频的文章，或者含图片的文章等。但是不幸的是每个客户端都会触发之，试想下，当你向下滚动页面的时候，鼠标触碰了这些图片或元素，会是一个不好的体验。

感谢这篇文章！

Jake says:

December 1, 2013 at 7:55 am

I tried this a while ago on a project and it does trigger a layout when pointer-events: none; is applied to the body (It does in your demo as well). I came up with a different solution but it was more complicated. It basically involves moving a 100x100px fixed position div under the mouse using translate3d() while scrolling, then moving it back out of the window when scrolling is done. That stops the hover effects and doesn’t trigger a layout. This was on a really complicated page, so that forced layout was more of an issue.

Jake 说：

2013-12-1 7:55

不久前在一个项目中我尝试了这个，当pointer-events: none;应用在body上的时候（正如demo做的那样）触发了布局。我就想了一个不同的解决方法，但是要更复杂些。我创建了一个100x100px fixed定位的元素，通过translate3d()让其在滚动的时候移动在鼠标的小面，当滚动停止的时候再移动到窗体外面。这下子阻止了hover效果同时不触发布局。因为这是一个非常复杂的页面，因此触发布局(layout)是个比较严重的问题。

Greg says:

December 2, 2013 at 8:18 am

Thank you!!!

I used this technique to solve a different problem which should also be worth mentioning.

On my site I am using the Google Maps API and when I scroll down the page (using the scroll-wheel) the page suddenly stops once my mouse hovers over the map. The scroll-wheel would then start to re-scale the map which was annoying, I could disable the scroll wheel in the API but that would disable it permanently.

Using this method the user can now scroll past the map using the scroll wheel AND re-scale the map if they so desire using the scroll wheel. Two worlds in harmony 🙂

Greg 说：

2013-12-2 8:18

多谢！！！

我使用这个技术解决了另外一个问题，我觉得值得一提。

我的站点上使用了Google地图API当我使用滚轮滚动页面的时候，当我鼠标经过这个地图的时候，滚动就会停止，变成地图大小的缩放了。我可以利用API禁止地图的滚轮缩放，但是这种禁用是永久的。

使用这个方法用户就能够自如地从地图上面滚过去，同时不影响地图的缩放。两个世界都和谐了 🙂

d43m says:

December 3, 2013 at 7:11 pm

Looks like it doesn’t change anything with firefox, at least on the demo site, the hover effect doesn’t trigger either way while scrolling.

However, good tip for scrolling on the map Greg !

d43m 说：

2013-12-03 19:11

似乎firefox下没有任何改变，至少本文的demo页面如此，滚动时候不会触发任何hover效果。

不过，Greg的那个地图处理技巧很赞！

Schalk Neethling says:

December 3, 2013 at 11:02 pm

Thanks for this awesome article! Here is how I ended up implementing it and it works great ~ https://gist.github.com/ossreleasefeed/7768761

Schalk Neethling 说：

2013-12-03 23:02

多谢分享如此精彩的文章。这里是我的实现，效果很赞~ https://gist.github.com/ossreleasefeed/7768761

egiova says:

December 4, 2013 at 2:48 am

Excellent little trick to avoid “light pollution”. What about side effects on touch screens?However, it remains to be tested at large scale. But good clue to follow…

egiova 说：

2013-12-04 2:48

避免“光污染”不错的小伎俩。触摸屏幕的副作用怎么办呢？显然，这还需要大规模的测试。但是值得跟进……

Greg Whitworth says:

December 6, 2013 at 3:50 am

@Manumanu @RyanSeddon He is somewhat correct in regards to how IE11 handles :hover on scroll. To keep the explanation simple (we may post a blog post for more detail on the matter), we turn off hit testing if the mouse isn’t moving so you won’t get any un-necessary paints, however, there are some caveats to this for compatibility reasons. Even when using your suggested CSS+JS trick you won’t get too much perf increase in IE11 due to the fact that we use independent rendering (we’re rendering on a separate thread from the UI thread) but it would free up some CPU cycles for any script you might be running. Hope that helps!

Greg Whitworth 说：

2013-12-6 3:50

@Manumanu @RyanSeddon 他对IE11的:hover在滚动上的认识或多或少是正确的。为了解释简单（关于此话题的细节我们可以发表一篇博文），我们可以简单理解为，如果鼠标不移动，我们关闭hit testing, 这样就不会有无所谓的绘制，但考虑到兼容原因，还需要一些注意事项。即使使用你提出的CSS+JS技巧，在IE11中也不会得到很完美的性能提升。因为我们使用了独立渲染（使用分离的UI线程进度渲染），它会为你运行的任何脚本进行周期性的CPU释放。希望这个有所帮助！

Yuanyan says:

December 9, 2013 at 6:37 pm

If u do it, it will make scrolling not work on mobile device.Test on mobile that “pointer-events: none” will disable the touch events. It’s seems not a good hack for mobile web.

Yuanyan 说：

2013-12-9 18:37

如果你砍了这一刀，移动设备的滚动直接毙命。经测试，pointer-events: none会干掉touch事件。貌似此技巧对移动web不适用啊！

Alex says:

December 9, 2013 at 8:17 pm

Firefox also turns off hit testing while scrolling, and from a quick test of the test page this trick would probably slow it down (Changing the pointer-events causes it to repaint whatever the mouse was hovering over when the scroll started, which it doesn’t do otherwise)

Alex 说：

2013-12-9 20:17

Firefox滚动时候也会关闭hit testing, 面对本文的测试页面的快速测试，这种处理可能会降低页面速度（但是，如果浏览器不这么做，那在滚动开始的时候改变pointer-events会导致无论鼠标移到哪里都会重绘）