How Passive Touch Event Listeners Boost Mobile Scrolling Performance in Chrome

1. Introduction

Scrolling is a crucial interaction for mobile web pages, but touch event handlers often cause serious performance problems. Chrome allows developers to pass

{passive: true}

to

addEventListener()

, making listeners passive so they no longer block scrolling.

Starting with Chrome 56, touch listeners are passive by default, which greatly improves user experience without significant impact on sites.

In rare cases this can cause unintended scrolling; adding the CSS property

touch-action: none

to the affected element prevents scrolling.

2. Background

If you call

preventDefault()

inside

touchstart

or

touchmove

handlers, the page scroll is blocked. Browsers must wait for the handler to finish before deciding whether to scroll. By registering listeners with

{passive: true}

, the browser assumes

preventDefault()

will not be called, allowing smooth scrolling. Example:

element.addEventListener('touchstart', handler, {passive: true});

3. Optimization

The goal is to reduce latency after a touch. Observations show about 80% of listeners are already passive but not registered as such. Chrome now defaults

passive: true

for listeners attached to

window

,

document

, or

body

.

Implementation (illustrated in the image) sets

passive

to

true

for these listeners.

Now calls to

preventDefault()

inside handlers are ignored.

Performance data collected on Android Chrome shows average latency dropping from over 400 ms to about 250 ms—a 38% reduction—with a target of sub‑50 ms response time.

4. Issues and Fixes

In most cases the optimization does not introduce bugs, but occasional unwanted scrolling or unexpected

click

events may occur. In Chrome 56+ a DevTools warning is printed if

preventDefault()

is called on a passive listener.

You can check the

defaultPrevented

property to see whether

preventDefault()

took effect.

Most problems are easily fixed by using the CSS

touch-action

property, e.g.,

touch-action: none

to prevent any scrolling or zooming, or

touch-action: pan-y pinch-zoom

to allow only vertical scrolling and pinch‑zoom.

Because Safari and some older browsers do not support

touch-action

, you still need to call

preventDefault()

in event handlers for those environments.

If

preventDefault()

is called in a

touchstart

listener to block a

click

, ensure it is also called in the corresponding

touchend

listener.

If you must override the default and need a non‑passive listener, pass

{passive: false}

to

addEventListener()

and verify that the browser supports EventListenerOptions.

5. Conclusion

After Chrome 56’s passive‑listener optimization, most pages scroll faster, though a few may exhibit unexpected scrolling. Developers should avoid calling

preventDefault()

in

touchstart

or

touchmove

handlers and instead use the

touch-action

CSS property to control scrolling and zooming, reserving

preventDefault()

for

touchend

only when necessary.