Issues with inverted/top infinite load. about vue3-infinite-loading HOT 10 OPEN

After a lot of testing and reviewing the code for this component, I think I found out what's causing my issues.

The $state.complete method doesn't calculate the scrollTop like the $state.loaded method does, which causes the component to jump to the last bit of data on the final load. In your demo, there is an unending stream of data, so the user never gets to the last request where the complete method is called. I found this behavior because I am testing with a small amount of data. I tried to fix the problem by calling the loaded method just before complete, but the isVisible function triggers a loop of loads until the target element is filled, and if there isn't enough data to fill the target element, then it keeps trying to load data. The issues that result are dependent on the API providing the data, but it isn't a viable workaround.

Is this something that needs to be fixed, or am I missing something?

from vue3-infinite-loading.

Here's my temporary fix, which proves out the issue. The first line in my infinite handler stores the target element's previous height in the local state. Just like your component does. Then, when the complete condition is met, I follow the call to the complete method with the following code. The final transition is now smooth.

nextTick(() => {
    scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight - prevHeight;
});

from vue3-infinite-loading.

I'v tried to reproduce this issue but it works just fine for me
If you can manage to provide a fully functional example, it would help a lot.
You can start from this one on StackBlitz

from vue3-infinite-loading.

I'v tried to reproduce this issue but it works just fine for me If you can manage to provide a fully functional example, it would help a lot. You can start from this one on StackBlitz

Your example doesn't accurately represent the problem because line 16 of App.vue will never be true in your app. The API is never ending, so it will always return 10. However, if you had a dataset of 38 items, then on the last request for data that line would be true and you would experience the issue I am reporting.

from vue3-infinite-loading.

Use the following App.vue in your stackblitz to replicate the issue. Notice how the final load causes a jump to the top.

<script setup>
import { ref } from 'vue';
import InfiniteLoading from 'v3-infinite-loading';
import 'v3-infinite-loading/lib/style.css';

let comments = ref([]);
let page = 0;
const load = async ($state) => {
  console.log('loading more...');
  page++;
  try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/posts?_limit=30&_page=' + page
    );
    const json = await response.json();
    comments.value.unshift(...json);
    if (json.length < 30) {
      $state.complete();
    } else {
      $state.loaded();
    }
  } catch (error) {
    $state.error();
  }
};
</script>
<template>
  <div class="top-results">
    <InfiniteLoading @infinite="load" :top="true" target=".top-results" />
    <div v-for="comment in comments" :key="comment.id" class="result">
      <div>{{ comment.title }}</div>
      <div>{{ comment.id }}</div>
    </div>
  </div>
</template>
<style>
.top-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  height: 500px;
  width: 380px;
  overflow-y: scroll;
  margin: 0 auto;
  border-radius: 10px;
  padding: 10px;
}
.result {
  font-weight: 300;
  width: 80%;
  padding: 20px;
  text-align: center;
  background: #eceef0;
  border-radius: 10px;
}
</style>

from vue3-infinite-loading.

Oh okay, now i see the issue.
Thanks.

from vue3-infinite-loading.

Oh okay, now i see the issue. Thanks.

Do you plan to fix it?

from vue3-infinite-loading.

Any progress on this issue?

from vue3-infinite-loading.

Any updates on the issue? i got the same problem

from vue3-infinite-loading.

Same issue!!! Any update please

from vue3-infinite-loading.