NaN offset when building out chat example

[kgrosvenor]

const vsl = this.$refs.vsl const offset = sids.reduce((previousValue, currentSid) => { const previousSize = typeof previousValue === 'string' ? vsl.getSize(previousValue) : previousValue return previousSize + this.$refs.vsl.getSize(currentSid) })

Any ideas?

[kgrosvenor]

I got it working like this for anyone looking for a solution to offset scrolling

apiClient.get(`chat/${this.$route.params.groupId}?limit=${this.limit}&offset=${this.data.items.length}&created_lt=${this.pivot}`).then((res) => {
    let {totalSize, items} = res.data;
    this.data.totalSize = totalSize;
    let item = this.data.items[0];

    this.data.items = items.reverse().concat(this.data.items);
    this.isAppending = false;

    let index = this.data.items.findIndex(x => x.id === item.id)

    this.$nextTick(() => {
        this.$refs.scroller.scrollToIndex(index)
    });
})

[tangbc]

What's the browser device?

[kgrosvenor]

Hey, it's Google chrome @tangbc, i found a work around. Really liking this implementation of virtual scrolling, does exactly what i need it to!

[tangbc]

Is this.$refs.vsl.getSize(currentSid) got undefined?

[xrei]

@tangbc Yes, it returns undefined, for some values.

[af-owe]

Yeah, I had a similar issue! getSize returned undefined for some of the elements. With the code from the chat-room example, it is not working properly.

I am now using the scrollToIndex in the next tick and it is working as expected now.

[ellermister]

this.data.items[0];

Taking 0 directly does not seem to be the best way, Because the current scroll bar is not necessarily docked to the top, it may be the first element that needs to get the current visible area.

The offset is more reliable, but the value obtained by the offset is always smaller than my actual top height, and the oftenwill be undefined, NaN.

2 years have passed, is there a new way? @kgrosvenor @tangbc

[Abdulmajeed-Jamaan]

I dig deep into this issue and found the following:

https://github.com/tangbc/vue-virtual-scroll-list/blob/a4123b7a311d28c70e819812927285e92a43cd64/src/item.js#L25

Source of problem: This line is responsible for the chat demo getting scroll offset Nan when scroll to top,i uncomment it and it works as expected.

Explanation: it looks like that when vue update the element the resize observer is not triggered.

Hope this helps @tangbc .

[Tangjuyi]

It's 2024, do you have a solution? Demo or obtain the upper NAN