Quasar ScrollArea сброс позиции

Question

У меня есть следующие прокрутки и с событием щелчка я хочу, чтобы позиция прокрутки была сброшена до 0. Однако я не знаю, почему следующий код не работает.Точно так же, как в документации Квазар. Я также приветствую упомянутый импорт.

<q-scroll-area id="test" style="width: 97%; height: 100%; position: absolute;">

methods: {
    handleScroll () {
      const ele = document.getElementById('test') //
      const target = getScrollTarget(ele)
      setScrollPosition(target, 0, 1000);
    },
}

Answer 1

Вы можете использовать метод Vue .setScrollPosition

setScrollPosition (offset [, duration]) Установить позицию прокрутки для смещения.Если указана длительность (в миллисекундах), прокрутка анимируется.

Добавьте ref в область q-scroll, а затем в своем методе используйте ее для установки положения прокрутки впрыгать, чтобы.Для этого примера я сделал элементы списка кликабельными и, таким образом, вернул их в верхнее положение.

new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      count: 100
    }
  },
  methods: {
  	notify: function () {
      this.$q.notify('scroll to top')
    },
    scrollToTop: function () {
      this.notify()
      this.$refs.scrollArea.setScrollPosition(0)
    }
	},
  computed: {
    values () {
      let value = []
      for (let index = 0; index < 100; index++) {
        value.push('This is a placeholder')
      }
      return value
    }
  },
})

<div id="q-app">
  <q-scroll-area id="test" style="width: 97%; height: 100%; position: absolute;" ref="scrollArea">
    <q-list>
      <q-item v-for="(val, index) in values" @click.native="scrollToTop">
     {{index}} - {{val}}
      </q-item>
    
    <q-scroll-area>
</div>

Codepen