已解決430363個問題，去搜搜看，總會有你想問的

Vue.js - 如何從 vuetify v-dialog 組件“抓取”滾動事件

首頁猿問 Vue.js - 如何從...

Vue.js - 如何從 vuetify v-dialog 組件“抓取”滾動事件

JavaScript

九州編程 2023-09-14 18:07:10

我正在開發的 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

查看完整描述

3 回答

慕斯王

TA貢獻1864條經驗獲得超2個贊

我遇到了和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();

? },

反對回復 2023-09-14

慕絲7291255

TA貢獻1859條經驗獲得超6個贊

如果你想平穩過渡：

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

反對回復 2023-09-14

慕的地8271018

TA貢獻1796條經驗獲得超4個贊

將“scrollable”屬性添加到“ <v-card>”
添加v-scroll.self="onScroll"到（或滾動的元素）（根據 v-scroll 文檔）
將 id 添加到 ( id="requestform") （為滾動頂部選擇）
添加滾動到頂部的按鈕（與上面的 codepen 相同）

添加到頂部方法：

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

反對回復 2023-09-14

3 回答
0 關注
169 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue.js - 如何從 vuetify v-dialog 組件“抓取”滾動事件

Vue.js - 如何從 vuetify v-dialog 組件“抓取”滾動事件

3 回答

添加回答