Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.42k stars 900 forks source link

Scroll to index or div#id #180

Open pandemozhno opened 5 years ago

pandemozhno commented 5 years ago

How make scroll to item programmatically? Please.

pandemozhno commented 5 years ago

i find function scrollToItem() but it not work in pagemode :( help

geerpm commented 5 years ago

Works for me.

<template>
    <recycle-scroller
      :emit-update="enabledOnUpdate"
      @update="onUpdate"
      ref="scroller"
      :items="list"
      :item-size="84"
      :buffer="84 * bufferItemNum"
    >
      <template v-slot="{ item }">
        <div>{{ item.name }}</div>
      </template>
    </recycle-scroller>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

export default class Aaa extends Vue {

  public enabledOnUpdate = true;
  public bufferItemNum = 4;

  public beforeDestroy() {
    const index = (<any>this.$refs.scroller).$_startIndex;

    // Actually, I use vuex store
    localStorage.setItem('list_index', index + bufferItemNum);
  }

  public onUpdate() {
    this.enabledOnUpdate = false;

    setTimeout(() => {
      (<any>this.$refs.scroller).scrollToItem(localStorage.getItem('list_index') || 0);
    }, 10);
  }
}
</script>
jnetrox commented 5 years ago

It only works with a fixed height scroller, but it doesn't work if page-mode is on.

jclark-dot-org commented 5 years ago

Agree with @jnetrox - scrollToItem does not work when using pagemode; and nothing works for me if I don't use pagemode.