Comments (7)
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:
- Go to the organizations page
- Reduce the height of the browser window, so the list is not fully visible
- Scroll down the organization list
- Open the last organization
- 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.
Related Issues (20)
- Improvement on router HOT 12
- Data hydratation issue with partial reload on initial page visit HOT 2
- Please update docs HOT 6
- Query Param array gets repeated after second call to any router method HOT 1
- Edge Side Rendering (ESR) with Cloudflare Workers
- React: useForm Options - Replace History
- Major issues with inertia
- ability to setData using array/objects on useForm HOT 1
- Router only checks that `window.history.state` isn't empty, breaks when used with other frameworks
- `router.visit` expects but doesn't list `application/json` in `Accept` header
- ../ not working with Link component HOT 1
- Conflict between Inertia-router and `scroll-behavior: smooth`
- Scroll restoration issue HOT 2
- All Inertia requests must receive a valid Inertia response, however a plain JSON response was received. HOT 1
- Could not find a typescript declaration for @inertiajs/svelte and @inertiajs/svelte/server HOT 1
- Content-Type remains as `application/json` while trying to upload a file using `useForm` helper.
- `encode: false` doesn't work in custom axios param serialiser
- Scroll To Text Fragment (#:~:text) not working / inconsistent behavior | Flickering on scrolled page reload
- Update the Official documentation. HOT 2
- module is not defined HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from inertia.