javascript - How to achieve a very smooth native like scrolling on mobile browser? - Stack Overflow

I have exhausted all my CSS and javascript knowledge and I still could not figure out how they optimize their mobile website so much that it scrolls like a native app, even with images and videos that are occupying most of the viewport, it still scrolls very smooth.

I have tried

scroll-behavior: smooth;

in my CSS containers

and javascript

document.querySelector(target).scrollIntoView({ behavior: 'smooth' });

and I have even tried

will-change: transform;

attribute on a parent container that transforms content upwards computed by javascript. That is probably the worst performing one in my test.

How does facebook do it?

I have exhausted all my CSS and javascript knowledge and I still could not figure out how they optimize their mobile website so much that it scrolls like a native app, even with images and videos that are occupying most of the viewport, it still scrolls very smooth.

I have tried

scroll-behavior: smooth;

in my CSS containers

and javascript

document.querySelector(target).scrollIntoView({ behavior: 'smooth' });

and I have even tried

will-change: transform;

attribute on a parent container that transforms content upwards computed by javascript. That is probably the worst performing one in my test.

How does facebook do it?

• javascript
• css
• smooth-scrolling
• mobile-browser

Share Improve this question Follow edited Jan 2 at 14:42 mopeigne 2177 bronze badges asked Jan 2 at 14:34 KolektadorKolektador 355 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I figured out how to achieve it but it has it own sets of challenges. Apparently dynamically populated container with a height or max-height that is not % will scroll smoothly like a native app.

In my case it was a subcontainer in a flex box that is dynamically populated by lazy loaded content. I say it comes with its own sets of challenges because if you heavily use javascript, a lot of it has interference with 100vh or fixed units for height and it will not work, for example:|

window.scrollTo(0,0);

will not work in case you want a home button to scroll to the very top.

The scrolling of the container with fixed height will also not be recognized by a global javascript scroll listener like

this.addEventListener("scroll", function (event) {});

and you will end up needing to write or rewrite a javascript code that specifically detects the scrolling inside the container that you put a 100vh to. Easy to do on a new project, torture if you are revising an existing one. In my case it is an existing project.

In the end I decided to forego the implementation of that native like scrolling for now as the current working solution is already smooth and good enough. If I find a better solution I will update this answer.