TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

60fps scrolling using pointer-events: none

104 点作者 yashness超过 11 年前

11 条评论

yason超过 11 年前
I&#x27;m a bit surprised browsers do in-scrolling events: browser performance has been under heavy optimization for years and switching to &quot;panning mode&quot; with no events emitted while scrolling would seem like a splendid candidate for something like a &quot;Turbo mode&quot;. Alternatively the change to disable events could&#x27;ve plausibly been written as a fix to usability bugs caused by in-scroll hover events.<p>This is because I&#x27;m not sure if, since -94 or so, I&#x27;ve seen a single case where event handling while scrolling would have actually added to browsing usability at all. It consistently creates two kinds of problems: first laggy scrolling as elements with heavy events handlers get focused and unfocused and secondly crazy behaviour when on-hover menus will open abruptly while scrolling and the state of the page ends up messed up when the scrolling stops.<p>It makes sense to scroll like it happens in mobile devices: the input events drive the scrolling only and the page just pans around as long as the fingers move on the screen, and the browser effectively returns to interactive mode when the scrolling stops.
matthewmacleod超过 11 年前
Hmm. I can only see a minor performance increase in Chrome. Safari is dead smooth regardless of the option selected, and Firefox is pretty hanky even with events disabled.<p>This is probably a useful technique for specific situations where scroll events are causing issues, but it&#x27;s definitely something that should generally be handled by the browser, rather than the developer. Still, Safari&#x27;s awesome performance suggests that there&#x27;s room for improvement in browsers&#x27; handling of this situation.
babby超过 11 年前
Considering I was just googling about, wondering why I had such awful scrolling FPS, seeing this prompted me to just make a userscript [1]. Just load it up in greasemonkey. Tested in FF2x.<p>Works on all pages, just adds the pointer-hover: none to the body element. Using modified code from the article. Quite useful, really. I&#x27;m surprised at how often I subconsciously guide my cursor away from content while scrolling pages to prevent hover effects popping off.<p>[1] <a href="http://userscripts.org/scripts/show/185715" rel="nofollow">http:&#x2F;&#x2F;userscripts.org&#x2F;scripts&#x2F;show&#x2F;185715</a>
panic超过 11 年前
I&#x27;ve noticed Safari delaying hover events while scrolling, presumably for this same reason. It seems like something the browser should handle. Individual sites shouldn&#x27;t be forced to hack around the issue.
评论 #6873684 未加载
评论 #6874167 未加载
Xcelerate超过 11 年前
Perhaps this is a dumb question because I don&#x27;t know much about browser performance optimization, but why is a modern browser unable to animate one hover effect over the currently pointed to box at 60 fps as you scroll down the page? That does not sound particularly computationally intensive.
评论 #6873649 未加载
评论 #6873681 未加载
评论 #6879593 未加载
mistercow超过 11 年前
It looks to me like Firefox already does this, only better - when scrolling stops, it not only reënables hover, but also applies its effects immediately. With the JS solution, anything the cursor lands on will only hover once the mouse moves again.
Sarkie超过 11 年前
So this is from HTML5Rocks, I go to their site and in the footer. &quot;This is a Google Project&quot;<p>I want to subscribe to their articles, Twitter? No, Google Plus? No,... they only have RSS.<p>Now I wish there was a Google product that works with RSS.
评论 #6873828 未加载
jheriko超过 11 年前
why is hover detection slow? i know browser devs are way behind the times... but three things:<p>* the browser can implement this optimisation<p>* spatial partitioning maybe is a much better general solution. the 2d aabb case is extrememly fast and can handle checks against 10000s of boxes per ms with good memory layout<p>* stagger checks across frames if more optimisation is needed when there are say, 100000s boxes to test (maybe? i&#x27;m skeptical even that would be especially slow)
untilHellbanned超过 11 年前
Not much of an effect on my site&#x27;s timeline (Chrome 31), maybe even a little worse than not having it.<p>Perhaps the demo &quot;paints&quot; a false picture considering that most sites don&#x27;t have the same simplicity&#x2F;symmetry of hoverable elements.
yread超过 11 年前
Opera probably already does something like that as scrolling in it is smoother than in FF on my machine even with the &quot;disable hover&quot;
评论 #6873917 未加载
mojuba超过 11 年前
I still read !important as &quot;not important&quot; sometimes. Was probably a poor choice of a keyword for that purpose.
评论 #6875199 未加载