vue-virtual-scroller icon indicating copy to clipboard operation
vue-virtual-scroller copied to clipboard

enhancement: offset item based on itemsize when using scrollToIndex method

Open Tmodurr opened this issue 4 years ago • 2 comments
trafficstars

I was running into issues where scrolling to an item index meant the item was not fully in the user's view (element was cut off). Updated vue-virtual-scroller.esm.js below; not sure if the src code should be updated elsewhere but figured I would put this out for discussion at least.

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

Tmodurr avatar Sep 05 '21 21:09 Tmodurr

Not saying this is the best implementation 🤓 but worked for me. This is for dynamic scroller so size needed to be variable.

Tmodurr avatar Sep 05 '21 21:09 Tmodurr

Under what circumstances can this scrolltoitem method be used? I the following code scrolling to a certain position does not take effect. Please give me some advice。

nextTick(() => { songDetailRef.value && songDetailRef.value.scrollToItem(5); });

Look at the scrolltoposition method in vue-virtual-scroller.esm.js. The parameter was set to this. $el.scrolltop, but it failed。

zyTheGit avatar Dec 09 '21 03:12 zyTheGit