TypeError: Cannot read property '_infiniteScrollHeight' of null

[kvanska]

2.4.4

Vue.js version 2.6.10

Nuxt.js version 2.8

Steps to reproduce

When loading page without infinite-loading control and then navigatin to another page (SPA) that has infinite-loading, getting exception "TypeError: Cannot read property '_infiniteScrollHeight' of null"

What is Expected?

no exception

What is actually happening?

getScrollParent function recursively finds the parent element and for some reason when loading in SPA, parent node is null for:

on page refresh it's not null and parent is set to window

here it's said that

".... if all failed, the component will use window as the scroll container."

In this case it clearly fails but window is not set as the scroll container.

[edwh]

I hit this problem - thanks for the fix. Any chance of doing a release soon that includes this?

[Frozire]

I hit this problem too, @PeachScript - anything we can do to help push this change?

[nicolashmln]

Same problem here

[jawn-ha]

same problem

[jankaderabek]

Hi, I have the same problem. Is there any chance that #255 will be merged soon?

[DomcaSuzi]

I needed this fix too. For the time being I was using kuroskis forked repository with fix, but he deleted it. I created new forked repo with this fix #255
Feel free to rewrite your package.json dependencies to "vue-infinite-loading": "https://github.com/DomcaSuzi/vue-infinite-loading".

[phyzerbert]

I hit this problem - thanks for the fix. Any chance of doing a release soon that includes this?

Too many requests for this props force-use-infinite-wrapper="body"

[andreasvirkus]

@phyzerbert thanks! this solved it for me 🎉

[iulo]

@andreasvirkus What do you mean this solved it for me ?
you shouldn't use force-use-infinite-wrapper="body", it is the wrong way.

[andreasvirkus]

@iulo why is it the wrong way? It didn't degrade performance, didn't cause any extra bugs and solved the annoying errors. Checked all my boxes 🤷‍♀️ 🙊

[iulo]

@andreasvirkus when you set force-use-infinite-wrapper="body", ths scrollParent will set to body element, not the window.

vue-infinite-loading/src/components/InfiniteLoading.vue

Lines 318 to 324 in 4baed2b

	if (typeof this.forceUseInfiniteWrapper === 'string') {
	result = document.querySelector(this.forceUseInfiniteWrapper);
	}
	if (!result) {
	if (elm.tagName === 'BODY') {
	result = window;

then getCurrentDistance will always return a number <=0

vue-infinite-loading/src/components/InfiniteLoading.vue

Lines 292 to 306 in 4baed2b

	getCurrentDistance() {
	let distance;
	if (this.direction === 'top') {
	distance = typeof this.scrollParent.scrollTop === 'number'
	? this.scrollParent.scrollTop
	: this.scrollParent.pageYOffset;
	} else {
	const infiniteElmOffsetTopFromBottom = this.$el.getBoundingClientRect().top;
	const scrollElmOffsetTopFromBottom = this.scrollParent === window
	? window.innerHeight
	: this.scrollParent.getBoundingClientRect().bottom;
	distance = infiniteElmOffsetTopFromBottom - scrollElmOffsetTopFromBottom;
	}

so the loading behavior will be triggered all the time until it is completed which I think it's not what you expected.

Try the demo below to see what happens.
https://codepen.io/iulo/pen/xxqrzrZ