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

xlpyo6sf  于 2023-03-03  发布在  Vue.js
关注(0)|答案(3)|浏览(214)

我正在做的javascript项目尝试在Vuetify v-dialog组件中加入一个"scroll-to-top"按钮,这个按钮只能在向下滚动(y轴)20px后才能显示。我们在v-dialog中也有一个v-card和v-treeview(有可滚动的项目列表)。但是,我似乎不知道如何在v-dialog组件中"抓取" scroll事件来触发任何东西。

<v-dialog>
  <v-card>
    <v-treeview>  //scrollable list
    </v-treeview>
  </v-card>
</v-dialog>

有什么想法吗?
下面是一个非常类似的Codepen,它与我尝试完成的任务非常相似。https://codepen.io/carlos-henreis/pen/vzXKBJ
谢谢!

ds97pgxw

ds97pgxw1#

我遇到了与OP相同的问题。在对话框中没有出现v-scroll或$vuetify.后藤()的预期行为。
最后,我通过利用
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();
  },
8i9zcol2

8i9zcol22#

  • 将“可滚动” prop 添加到“<v-card>
  • 添加v-scroll.self="onScroll"到(或滚动的元素)(根据v-scroll文档)
  • 将ID添加到(id="requestform")(选择滚动顶部)
  • 添加按钮滚动到顶部(与上述codepen相同)
  • 添加到顶部方法:
toTop() {
  document.getElementById('requestform').scrollTop = 0
},
qnzebej0

qnzebej03#

如果您希望实现平稳过渡:

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

相关问题