Quasar ScrollArea 重置位置答案

【问题标题】：Quasar ScrollArea reset positionQuasar ScrollArea 重置位置
【发布时间】：2018-10-15 12:19:04
【问题描述】：

我有以下滚动和单击事件，我希望滚动位置重置为 0。但是我不知道为什么以下代码不起作用。它与Quasar Documentation. 中的完全相同，我也有提到的导入。

<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);
    },
}

【问题讨论】：

你在q-scroll-area中使用了<q-scroll-observable @scroll="scrollHandler" />吗？
@boussadjrabrahim 是的
你正在滚动到同一个区域
我怎样才能滚动到顶部？
当您单击滚动到顶部的元素时，我可以为您提供一个简单的 js 代码，而无需使用该组件

标签： vue.js quasar-framework

【解决方案1】：

可以使用Vue方法.setScrollPosition

setScrollPosition(offset[, duration]) 将滚动位置设置为偏移量。如果指定了持续时间（以毫秒为单位），则滚动动画。

将ref 添加到您的 q-scroll-area 中，然后在您的方法中，使用它设置要跳转到的滚动位置。在本例中，我将列表项设置为可点击，因此将重置为顶部位置。

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

【讨论】：