Forem

Cover image for Smooth Scroll on Mobile
Jesse Wei
Jesse Wei

Posted on

4 3

Smooth Scroll on Mobile

The Problem

Smooth scrolling on mobile devices is key to good user experience, though I think we all have experienced delayed or blocked scrolling behaviors.

The Cause

Event handlers may call preventDefault() to cancel default behaviours. In our case, the browser does not know if preventDefault() will be called before the touch handler finishes executing. So it waits for the handler to finish before triggering the scroll which is why we experience the delay.

The Solution

Fortunately this can be avoided by setting the passive option of relevant event listeners to true like this:

document.addEventListener(touchstart, handler, {passive: true})
Enter fullscreen mode Exit fullscreen mode

To solve the problem, we need to tell the browser beforehand that the scroll will not be cancelled so that it does not wait for the handler to finish running. And this is exactly what passive: true does.

Notes

Default Value

According to mdn,

If not specified, defaults to false – except that in browsers other than Safari and Internet Explorer, defaults to true for the wheel, mousewheel, touchstart and touchmove events.

There are two takeaways here:

  • On modern browsers like Chrome (version 56 or later),
document.addEventListener(touchstart, handler)
Enter fullscreen mode Exit fullscreen mode

is equal to

document.addEventListener(touchstart, handler, {passive: true})
Enter fullscreen mode Exit fullscreen mode
  • passive: true is only applied to handlers for these events: wheel, mousewheel, touchstart and touchmove.

Prevent Scrolling

In some cases where we DO want to prevent scrolling (e.g. Google Map or other interactive iframes), we can easily cancel it by setting the following in CSS:

touch-action: none;
Enter fullscreen mode Exit fullscreen mode

References

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay