scrollToItem method is useless

[nabaonan]

I want to use DynamicScroll's scrollToItem method, but it is useless, how can i use it , is it useful?

[leahciMic]

@nabaonan can you describe what your expectations of the method are and what you observe? Do you get any errors in the logs? Does it scroll but to the wrong position?

This will be extremely valuable for anyone that sees this bug and wishes to help.

[nabaonan]

@nabaonan can you describe what your expectations of the method are and what you observe? Do you get any errors in the logs? Does it scroll but to the wrong position?

This will be extremely valuable for anyone that sees this bug and wishes to help.

There is a demo to show https://codesandbox.io/s/vue-template-w549n, click the button ,it can't scroll to line 100

[leahciMic]

@nabaonan thank you for the sandbox.

Tracing this, scrollToItem calculates a position and then calls scrollToPosition

    scrollToPosition: function scrollToPosition(position) {
      if (this.direction === 'vertical') {
        this.$el.scrollTop = position;
      } else {
        this.$el.scrollLeft = position;
      }
    },

I do not know this code base that well (only started recently using it), It looks like scrollToPosition is not working in page mode. I think it should be using something like the getListenerTarget() to get the scroll parent and scrolling that instead of it's element.

It's a bit late on a Friday here, but I will take a quick look at submitting a PR to address this issue on Monday, unless someone else beats me to it.

[leahciMic]

Definitely works without page mode (make sure you set a height for the div, and correct overflow option (scroll, auto).

[nabaonan]

@nabaonan thank you for the sandbox.

Tracing this, scrollToItem calculates a position and then calls scrollToPosition

    scrollToPosition: function scrollToPosition(position) {
      if (this.direction === 'vertical') {
        this.$el.scrollTop = position;
      } else {
        this.$el.scrollLeft = position;
      }
    },

I do not know this code base that well (only started recently using it), It looks like scrollToPosition is not working in page mode. I think it should be using something like the getListenerTarget() to get the scroll parent and scrolling that instead of it's element.

It's a bit late on a Friday here, but I will take a quick look at submitting a PR to address this issue on Monday, unless someone else beats me to it.

Thank you for your solution，i have resolve it in the same way which you say, i find an array in the components which called itemsWithSize, It record each row's size, I can calculate the totalHeight where i want scrollTo. I will drop my method when you submit a pr.

[2xAA]

Hey there, any progress on this?

[geminiyellow]

2 years later, is the project still alive ?

[nabaonan]

2 years later, is the project still alive ?

i forgot close this issue， i didn't use it for a long time，but i found it still has some commit recent

[phil294]

Is this method documented anywhere?

Either way, scrollToItem works for me, but only by adding an artificial delay before it.

// setup
onMounted(async () => {
    await new Promise((r) => setTimeout(r, 0))
    scrollerRef.value.scrollToItem(10)
})

[gongxiansheng]

I use like this

version: 1.1.0
component: RecycleScroller

I use RecycleScroller component with itemSize, scrollToItem does not work, so I modify the source code scrollToItem method and sizes computed like this:

  computed: {
     sizes() {
        // if (this.itemSize === null) {
          const sizes = {
            '-1': {
              accumulator: 0
            }
          };
         ....
        for (let i = 0, l = items.length; i < l; i++) {
            current = this.itemSize || items[i][field] || minItemSize;
         ....
        return sizes;
      //  }
     // return [];
    }
  },
   methods: {
    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);
      }
  }

[hobywhan]

duplicate of #180