If you've ever built a mobile UI with heavy scrolling or touch interactions, you've probably noticed this:
Scrolling sometimes feels laggy or not smooth, especially when multiple event listeners are involved.
A big reason for this is how the browser handles events like touchstart, touchmove, and wheel.
The problem
By default, the browser assumes you might call event.preventDefault() inside these event handlers.
So it delays scrolling until it checks that first.
That small delay is enough to cause noticeable jank on mobile devices.
The solution: passive event listeners
You can tell the browser in advance that you will NOT block scrolling:
window.addEventListener("touchmove", handleTouch, {
passive: true
});
What does passive: true mean?
It simply tells the browser:
You are not going to call preventDefault() here.
So the browser can scroll immediately without waiting.
When to use it
Use passive event listeners when:
- You only read scroll or touch data
- You track user behavior (analytics, gestures)
- You update UI based on movement
When NOT to use it
Do NOT use it when you need to block default behavior, such as:
- Custom drag and drop interactions
- Scroll locking in modals or drawers
- Preventing native scrolling behavior
Why this matters
This is a small change, but on mobile it can noticeably improve performance, especially in scroll-heavy pages.
Sometimes performance improvements are not about big optimizations.
They are about removing tiny delays the browser is forced to wait on.
Top comments (0)