Virtual list with dynamic height elements jumps when appending new items via infinite scroll

Questions
1

Yea the topic pretty much sums it up.

My code is as follows:

const homePostCardsList = app.virtualList.create({
el: "#page-content-home-body",
createUl: false,
items: [],
itemTemplate: templates.homePostCard2(),
height: (item) => {
	let compiledTemplate = Template7.compile(templates.homePostCard2())

	$("#page-content-home-body").append(compiledTemplate(item))

	let height = $("#home-post-card-" + item.id).height()

	$("#home-post-card-" + item.id).remove()

	return height
}

})

The height calculation for every element works fine.

After appending new items using infinite scroll the list keeps jumping to either the middle or top.
Also: It seems like whenever I navigate to a new page and then back to the list, the list does not remain at the same place, it just renders again and starts at the top, which I don’t want. I’m using “keepAlive” in the route options. Any suggestions?

2

Nevermind fixed it myself, the height calculation was off by a few pixel.

1 Like