scrollToItem() not scrolling to correct place with dynamic scroller when item heights are dynamic and different than defined with min-item-size

[kevinhofmaenner]

It appears that scrollToItem() will not directly scroll to the item if the items are not exactly the same height as defined in the prop min-item-size. See code example below:

https://codesandbox.io/s/silly-greider-j0p8e?file=/src/components/HelloWorld.vue

It will scroll within a few 100 pixels of the actual item but never the actual item unless all items are the same height as what is defined in min-item-size.

Does anyone know what I am doing wrong?

[ladariha]

I have the same issue. Sometimes it scrolls very close, sometimes not that much. I also noticed that calling the scrollToItem with same parameter again sometimes "fixes" the issue (or at least changes the difference of expected/actual scroll)

[jgprimaki]

I solved this problem setting the property "min-item-size" to 1, I know that is strange, but helped me.

[danieljpalmer]

I solved this problem setting the property "min-item-size" to 1, I know that is strange, but helped me.

Can confirm this worked for me too. Strange areas.

[vvy6791]

I solved this problem setting the property "min-item-size" to 1, I know that is strange, but helped me.

It is not a good idea. Try to list a lot of items. Setting this prop to 1 VERY impacts the scrolling performance (

[vvy6791]

I have the same issue. Sometimes it scrolls very close, sometimes not that much. I also noticed that calling the scrollToItem with same parameter again sometimes "fixes" the issue (or at least changes the difference of expected/actual scroll)

It is a good workaround, and works effective, if you do it this way:

itemsScroller.scrollToItem(index);
setTimeout(() => itemsScroller.scrollToItem(index), 0)

But this causes a visible jump effect, like any similar workaround, of course...

[vvy6791]

In the current realization scrollToItem(index) scrolls (not always pretty, as described in this bug report) the item with index specified only one way: "moves" item only to the TOP of the scrollable area. And I have a case, when the item needs to be moved to the CENTER or to the BOTTOM of the scrollable area.

I tried a "wrapper" solution, that does it:

const itemsScroller = this.$refs.itemsScroller;
itemsScroller.scrollToItem(index);
if (placeTo == 'top')
    return;
setTimeout(() => {
    const scrollerElement = itemsScroller.$el;
    const itemElement = scrollerElement.querySelector('[data-index="' + index + '"]');
    if (!itemElement) {
        console.warn('item not found', index);
        return;
    }
    if (placeTo == 'bottom') {
        scrollerElement.scrollTop += itemElement.offsetHeight - scrollerElement.offsetHeight;
        return;
    }
    // placeTo == 'center'
    if (itemElement .offsetHeight < scrollerElement.offsetHeight)
        scrollerElement.scrollTop += (itemElement .offsetHeight - scrollerElement.offsetHeight) / 2;
}, 0);

The new argument placeTo (or some like) is need to be added to scrollToItem method, that can take tree possible values: 'top' (a default value), 'bottom' or 'center'. So, the method signature should be the following: scrollToItem (index, placeTo = 'top') And the next internal method too: scrollToPosition (position, placeTo = 'top') (see)

[vvy6791]

Now I upgraded to 2.0.0-beta.3. It seems to be this bug is not reproduced now.

"min-item-size" property set to 20 scrollToItem is called only once, and positions item exactly!

thanks to dev!

[CodeingX]

我解决了这个问题，将属性“最小项目大小”设置为 1，我知道这很奇怪，但帮助了我。

me too

[vshepel16]

version 2.0.0-beta.8 It appears that scrollToItem(lastIndex) will not directly scroll to the last list item, scrollToBottom() too. It will scroll within a few 100 pixels of the actual item. @Akryum

[lanstar2]

version 2.0.0-beta.8 It appears that scrollToItem(lastIndex) will not directly scroll to the last list item, scrollToBottom() too. It will scroll within a few 100 pixels of the actual item. @Akryum

yes.

[laterdayi]

@Akryum Has it had any updates