Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Making wheel scrolling fast by default

To improve wheel scrolling/zooming performance developers are encouraged to register wheel and mousewheel event listeners as passive by passing the {passive: true} option to addEventListener(). Registering the event listeners as passive tells the browser that the wheel listeners will not call preventDefault() and the browser can safely perform scrolling and zooming without blocking on the listeners.

The problem is that most often the wheel event listeners are conceptually passive (do not call preventDefault()) but are not explicitly specified as such requiring the browser to wait for the JS event handling to finish before it starts scrolling/zooming even though waiting is not necessary. In Chrome 56 we fixed this issue for touchStart and touchMove , and that change was later adopted by both Safari and Firefox. As you can see from the demonstration video we made at that time, leaving the behavior as it was produced a noticeable delay in scroll response. Now in Chrome 73, we've applied the same intervention to wheel and mousewheel events.

The Intervention

Our goal with this change is to reduce the time it takes to update the display after the user starts scrolling by wheel or touchpad without developers needing to change code. Our metrics show that 75% of the wheel and mousewheel event listeners that are registered on root targets (window, document, or body) do not specify any values for the passive option and more than 98% of such listeners do not call preventDefault(). In Chrome 73 we are changing the wheel and mousewheel listeners registered on root targets (window, document, or body) to be passive by default. It means that an event listener like:

window.addEventListener("wheel", func);

becomes equivalent to:

window.addEventListener("wheel", func, {passive: true} );

And calling preventDefault() inside the listener will be ignored with the following DevTools warning:

[Intervention] Unable to preventDefault inside passive event listener due
to target being treated as passive.See https://www.chromestatus.com/features/6662647093133312

Breakage and Guidance

In the vast majority of cases, no breakage will be observed. Only in rare cases (less than 0.3% of pages according to our metrics) unintended scrolling/zooming might happen due to preventDefault() call getting ignored inside the listeners that are treated as passive by default. Your application can determine whether it may be hitting this in the wild by checking if calling preventDefault() had any effect via the defaultPrevented property. The fix for the affected cases is relatively easy: pass {passive: false} to addEventListener() to override the default behavior and preserve the event listener as blocking.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!