Skip to content

scrollToItem conflicts with gridItems #773

@homersimpsons

Description

@homersimpsons

Describe the bug

A call to scrollToItem require the user to set a value for gridItems:

scrollToItem (index) {
let scroll
if (this.itemSize === null) {
scroll = index > 0 ? this.sizes[index - 1].accumulator : 0
} else {
scroll = Math.floor(index / this.gridItems) * this.itemSize
}
this.scrollToPosition(scroll)
},

Doing so, the library set a width to the items in px and that is by default the same as the itemSize:

https://github.com/Akryum/vue-virtual-scroller/blob/86fa98fd899487795b2d3c58d0486437d71c6892/packages/vue-virtual-scroller/src/components/RecycleScroller.vue#LL35C2-L35C11

This breaks list where the item width is 100%

Reproduction

<template>
  <div id="app">
    <RecycleScroller
      :items="items"
      v-slot="{ item }"
      :grid-items="1"
      :item-size="20"
    >
      <div height="20">{{ item.id }} This takes more than 20px witdh</div>
    </RecycleScroller>
  </div>
</template>

<script>
export default {
  setup() {
    return {
      items: [...Array(1000).keys()].map((x) => ({ id: x })),
    };
  },
};
</script>

https://stackblitz.com/edit/vue-zcyqsm?file=src/App.vue

System Info

NA (stackblitz)

Used Package Manager

yarn

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions