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

【问题标题】：Vue.js - How to 'grab' a scroll event from a vuetify v-dialog componentVue.js - 如何从 vuetify v-dialog 组件中“抓取”滚动事件
【发布时间】：2021-03-10 13:10:41
【问题描述】：

我正在处理的 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

谢谢！

【问题讨论】：

您好像忘记添加链接了
@DavidGo 感谢您的关注！
那么，您尝试在对话框上放置@scroll 事件，对吧？
你添加了可滚动的道具吗？ vuetifyjs.com/components/dialogs#scrollable
我确实尝试过这些。老实说，因为 v-treeview 在 v-card 内，即在 v-dialog 内，我什至不确定哪个组件是实际滚动的组件。我已经尝试在所有这些上添加滚动事件和 v-scroll 指令，但我无法获得任何滚动事件来触发任何东西。 codePen 示例完美地作为一个独立组件被扔到任何页面视图的根级别，因为它可以由 DOM 窗口事件触发，但我无法从 Vuetify 组件内部访问任何“滚动”事件.

标签： javascript vue.js vuetify.js

【解决方案1】：

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

最终，我通过利用实现了一个香草 javascript 解决方案

element.scrollIntoView() - MDN

在对话框中添加的 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();
  },

【讨论】：

他们要求在滚动视图时触发的事件。这样他们就可以在滚动开始时触发行为。我相信，您的回答并没有表明这是如何完成的。
是的，很遗憾，我无法识别对话框中的事件，因为它不会在对话框中发生，而只会在文档级别发生。这可能是由于对话框已从正常文档流中删除。

【解决方案2】：

将“可滚动”属性添加到“<v-card>”
将v-scroll.self="onScroll" 添加到（或元素滚动）（根据 v-scroll 文档）
添加 id (id="requestform")（选择滚动顶部）
添加按钮以滚动到 top（和上面的codepen一样）

添加 toTop 方法：

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

【讨论】：