history.back() Scroll position about inertia HOT 7 CLOSED

IMHO this is not caused by a "broken" Ping CRM: I removed the overflow-hidden from the layout and the issue still exists. Even if the layout is completely removed.

I just tried myself with PingCRM, and removing the scroll areas does make scroll restoration work again:

So far as I understand, the scroll position in a SPA needs to be restored manually.

No, as you can see above, this isn't required. The browser will automatically restore the scroll position. Of course this only works on the window/body, and won't work on scroll areas.

I still need to figure out a good solution for that. It's possible, for example, to grab the current scroll position whenever making an Inertia visit and save it in the history state. Later, when navigating through the history state, if a scroll position is available, Inertia can automatically restore that.

However, that only works for Inertia visits, and not external visits. The reason is because as soon as you make an external visit, you are breaking out of history.pushState, and cannot update it to include the current scroll position. The only solution I've found to this is to use an event listener to constantly check for scroll position changes, and update the history state. This feels like it could be a performance issue, but maybe it's not.

It would be awesome to track each individual scroll-region separately, and restore them each to their proper scroll position.

I am going to reopen this issue, because this is something I hope to eventually solve.

from inertia.

Hmm, yes, I agree. That is certainly the expected behaviour in Inertia. Somehow we must have busted this. I'll need to look into it. 👍

from inertia.

Also what about infinite scroll? I bet it will be re-rendered at history.back(). Maybe it will work if we will use preserve-state and remember: 'page', but still no scroll remember ;) - not sure tho.

from inertia.

Okay, so I did some testing on this today, and I think I know what's wrong. In your app, is your body scrolling, or do you have overflow: hidden on the body, with nested scroll containers?

Inertia relies on the default browser scroll restoration behaviour, which is only done on the body, not nested scroll areas. This is the same as if you had a server-side rendered app with nested scroll containers...the scroll position would not be restored (I went as far as to create a demo app to verify this).

My goal with Inertia has always been to mimic default browser behaviour, so while this feels like a bug, it's actually intended behaviour. One solution would be to make your body scrollable again for your content area, and then use a fixed header and sidebar for the persistent layouts.

I hope that helps. 👍

from inertia.

from inertia.

I was debugging Ping CRM. I thought there was no problem with the code, so I thought it's Inertia.js problem.

Yeah, Ping CRM is "broken" because it's using nested scroll containers. I need to revisit.

Btw. are you going to implement remember-scroll behaviour?

Not sure what you mean. You can already preserve scroll between page visits. As for remembering the scroll position in history state, I honestly don't know. I need to do more thinking on this whole problem.

Also sometimes I would like to don't cache page on history.back().

Again, this is default browser behaviour, which Inertia tries to copy as much as possible.

from inertia.

I stumpled upon the back-button scroll-position issue, too: Clicking the back button always scrolls to the top of the page, which is confusing. In Ping CRM do this:

1. Go to the organizations page
2. Reduce the height of the browser window, so the list is not fully visible
3. Scroll down the organization list
4. Open the last organization
5. Click on browsers' back button

IMHO this is not caused by a "broken" Ping CRM: I removed the overflow-hidden from the layout and the issue still exists. Even if the layout is completely removed. So far as I understand, the scroll position in a SPA needs to be restored manually. In Vue Router this is handled:
https://router.vuejs.org/guide/advanced/scroll-behavior.html

I tried to "fix" PingCRM by doing something similar. It works by adding this code to Organizations/Index.vue:

export default {
  remember: ['savedScrollPosition'],

  data() {
    return {
      // ....
      savedScrollPosition: 0,
    }
  },

  computed: {
    scrollRegion() {
      return document.querySelectorAll('[scroll-region]')[0]
    },
  },

  mounted() {
    this.setScrollPosition(this.savedScrollPosition)
    this.scrollRegion.addEventListener('scroll', this.onScroll)
  },

  beforeDestroy() {
    this.scrollRegion.removeEventListener('scroll', this.onScroll)
  },

  methods: {
    getScrollPosition() {
      if (this.scrollRegion) return this.scrollRegion.scrollTop
      else return window.scrollY
    },

    setScrollPosition(newValue) {
      if (this.scrollRegion) this.scrollRegion.scrollTo(0, newValue)
      else window.scrollY = newValue
    },

    onScroll() {
      this.savedScrollPosition = this.getScrollPosition()
    },   
  },
}

Note: I've used an event listener here, because there is no callback hook like "beforeInertiaVisit".

Now, the result looks pretty neat:

It would be great if this approach would built into the core library or into the Vue adapter. What do you think, @reinink?

from inertia.