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:&nbsp;'smooth'});

Answer 3

将“scrollable”属性添加到“&nbsp;<v-card>”添加v-scroll.self="onScroll"到（或滚动的元素）（根据 v-scroll 文档）将 id 添加到 (&nbsp;id="requestform") （为滚动顶部选择）添加滚动到顶部的按钮（与上面的 codepen 相同）添加到顶部方法：toTop()&nbsp;{ &nbsp;&nbsp;document.getElementById('requestform').scrollTop&nbsp;=&nbsp;0 &nbsp;&nbsp;},