Close
Grégory Besson

About Me

Grégory Besson

Digital Industrialization expert - Serial entrepreneur - Innovation specialist

Image

Scrolling gone fast with passive event listener

June 10th, 2016

In many cases when you create a web page, you attach listeners to "touch" or "wheel" events (touchstart, touchmove, touchend,  wheel) so that you can trigger functions at specific moments. 
But it comes with unfortunate side effects : Browsers do wait for the functions attached to these listeners to finish before starting the scroll. The result is scroll janks, very annoying and disturbing effects for your users. It doesn't feel native at all on mobile !

A new flag in the options of addEventListener appear to ease your life.
After reading this article from Kayce Basques and then this one from Rick Byers and Stefan Zager yesterday, I've been interested to test this new flag by my own. 

I wanted to show the potential performance boost on scrolling web pages to my co-workers at adfab just by adding the option {passive:true} to the touch or mouse wheel event listeners:

document.addEventListener('touchstart', touchHandler, {passive: true});

With this flag, your scroll doesn't wait anymore and your users will feel the difference scrolling your page !

The following page is a demo on which you'll be able to test it: http://industrialize.it/demo/passivelistener.html

Tick/untick the checkbox and scroll to see the difference.

I've used the same test Rick used in his Modernizr implementation to check that the passive option was recognised by the browser, and I've created a fake time consuming function on touch and mousewheel events.
You'll see that scrolling the page is not smooth at all, wether you do it with a mouse or with a touch.
If you then tick the checkbox "Enable passive Listener", you'll then trigger the passive option, making the scrolling incomparably smoother.

BEWARE ! Under the checkbox, you'll see if the browser you use to test do embed this new feature. At the time of this writing, I've successfully tested it on Chrome 51 desktop, but not on the chrome 51 iOS (Chrome running on WebKit on iOS, TY for the reminder Rick). But be patient, it seems that WebKit has included this feature (https://twitter.com/chris_dumez/status/740371892956102656) and should soon appear in iOS (soon is maybe a bit optimistic speaking about Apple's timeframe)

Demo done ! 

I think you should use the passive option asap. Smoothly scrolling a page is a key action in the web experience of your users, particularly on mobile. It's particularly efficient on long pages with annoying touch listeners slowing down the scrolling experience. It's already in Chrome desktop and Android, Opera, and in development on Webkit and Firefox : The status here

Highlight

The new passive option for touch and wheel event listeners is a game changer in some situation, improving drastically your mobile users experience. Go test it !