CODEWITHSUNDEEP
javascriptangularjsscrollinfinite-scroll
Matt Way
Matt Way

Reputation: 33151

Scroll to particular vertical position after browser refresh

I am building an infinite-scroll style list for a mobile web app (using angular). The catch is that the initial starting position of the list that the user should see is somewhere in the middle. This works fine on initial load of the page (setting scrollTop). However on page refresh, the browser attempts to set the scroll position to the last position the user was viewing.

My hack was to set a large enough delay on setting scrollTop so that it happens after the browsers attempt, but this feels clunky. Is there another angular way, or regular js way to achieve this requirement?

Upvotes: 2

Views: 731

Answers (1)

runTarm
runTarm

Reputation: 11547

It seems the "auto scroll to the last position the user was viewing" is vary in different browsers.

It may happen after a DOMContentLoaded event, or after window.onload, or both (happen twice e.g. in Chrome).

You could delay your position setting to after window.onload with setTimeout.

A plain vanilla JavaScript would look like this:

window.onload = function () {
  setTimeout(function () {
    window.scrollTo(window.pageXOffset, 500);
  }, 0);
};

Hope this helps.

Upvotes: 1

Related Questions