Vue.js - 如何从 vuetify v-dialog 组件“抓取”滚动事件

Question

我正在开发的 javascript 项目正在尝试合并一个“滚动到顶部”按钮，该按钮仅在 Vuetify v-dialog 组件内向下滚动（y 轴）20px 后才会呈现。我们在 v-dialog 内还有一个 v-card 和 v-treeview（具有可滚动的项目列表）。但是，我似乎无法弄清楚如何实际“捕获”该 v-dialog 组件中的滚动事件来触发任何内容。<v-dialog>  <v-card>    <v-treeview>  //scrollable list    </v-treeview>  </v-card></v-dialog>有什么想法吗？？这是一个与我想要完成的任务非常相似的 Codepen。 https://codepen.io/carlos-henreis/pen/vzXKBJ

Answer 1

我遇到了和OP同样的问题。对话框中没有发生 v-scroll 或 $vuetify.goTo() 的预期行为。

最终，我通过利用实现了一个普通的 JavaScript 解决方案

element.scrollIntoView()

在对话框中添加的 div 上。

在模板中：

<v-dialog>

  <div id="thisElement">

    <v-card>

      <v-treeview>

         //scrollable list

         <v-btn @click="goToTop">Scroll Up</v-btn>

      </v-treeview>

    </v-card>

  </div>

</v-dialog>

在方法中：

goToTop() {

    document.getElementByID("thisElement").scrollIntoView();

  },

Answer 2

如果你想平稳过渡：

document.getElementById("elementId").scrollIntoView({behavior: 'smooth'});

Answer 3

• 将“scrollable”属性添加到“ <v-card>”

• 添加v-scroll.self="onScroll"到（或滚动的元素）（根据 v-scroll 文档）

• 将 id 添加到 ( id="requestform") （为滚动顶部选择）

• 添加滚动到顶部的按钮（与上面的 codepen 相同）

• 添加到顶部方法：

  toTop() {
    document.getElementById('requestform').scrollTop = 0
    },