CODEWITHSUNDEEP
htmlcssgoogle-chromescrollsafari
Nathaniel Turner
Nathaniel Turner

Reputation: 91

Scrolling behavior differences between chrome and safari/firefox

So I'm building a rendering system for my app that pulls objects from a collection and runs em through js templates to create more children while the page is being scrolled. Essentially it detects when the bottom of the container is reached and removes the top row of rendered elements and appends a row of templated objects to the bottom of the container, and likewise but reverse for scrolling to the top.

The functionality itself isnt an issue. I've got it working 100% in chrome, but the issue starts in other browsers. In chrome, its as if the container scrolls forever, but in safari/firefox when the scroll hits the bottom, the new rows are rendered, but the scroll stays at the bottom so it looks like the last row is constantly being replaced by the next row to render.

My question is how can I determine the differences of how the scroll is operating so I can figure out a solution?

Upvotes: 2

Views: 3049

Answers (1)

Nathaniel Turner
Nathaniel Turner

Reputation: 91

So the difference that was happening was that chrome had a new feature they built in called scroll anchoring. They added it so new content being added to pages would not jerk the scroll around. It just so happened to be a missing piece of the rendering system i was building that wasn't missing only on chrome. I emulated what it was doing in my own code now it works right on all other browsers.

To anyone curious, chrome has a css control to that behavior called overflow-anchor: auto or none;

More info about "Scroll Anchoring"

Upvotes: 3

Related Questions