在 v-data-table (Vuetify) 的頂部和底部有一個水平滾動條

Question

發生的事情是我有一個 v-data-table，默認情況下我在底部有一個水平滾動條，但我希望這個滾動條在表格下方和上方都有。

我嘗試在幾個論壇和文章中進行研究，但是在涉及 v-data-table 時沒有關於此的信息。

這是我想做的一個例子

Answer 1

從技術上講，一個 div 在同一方向上不能有多個滾動條。

我們可以做的是創建第二個元素，其虛擬內容與我們要滾動的元素的內容大小相同，然后鏈接兩個元素之間的滾動功能。 簡單地說，當我們滾動一個時，我們也滾動另一個。

這是一個普通的實現，展示了原理：

 window.addEventListener("DOMContentLoaded", () => { const updateScrollers = () => { dummy.style.width = _b.scrollWidth + "px"; }; updateScrollers(); window.addEventListener("resize", updateScrollers); const linkScroller = (a, b) => { a.addEventListener("scroll", (e) => { b.scrollLeft = e.target.scrollLeft; }); }; [ [_a, _b], [_b, _a], ].forEach((args) => linkScroller(...args)); });

 #_a, #_b { overflow-x: auto; }.content { height: 100px; width: 200vw; } #_a > div { height: 1px; } #_b.content { background: repeating-linear-gradient( 45deg, #fff, #fff 50px, #f5f5f5 50px, #f5f5f5 80px ); }

 <div id="_a"> <div id="dummy"></div> </div> <div id="_b"> <div class="content"></div> </div>

如果您需要幫助在您的項目中實現它，您必須首先創建一個可運行的最小、可重現的示例。

---

使用 Vue，我們需要做的就是更新 model 值（ onScroll ）並讓 Vue 處理 DOM 更新（例如： :scroll-left.camel="scrollLeft" ）。

 const { createApp, onMounted, onBeforeUnmount, reactive, toRefs } = Vue; createApp({ setup: () => { const state = reactive({ scrolled: null, dummy: null, scrollLeft: 0, onScroll: (e) => (state.scrollLeft = e.target.scrollLeft), }); const updateScroller = () => { state.dummy.style.width = state.scrolled.scrollWidth + "px"; }; onMounted(() => { window.addEventListener("resize", updateScroller); updateScroller(); }); onBeforeUnmount(() => { window.removeEventListener("resize", updateScroller); }); return toRefs(state); }, }).mount("#app");

 .scroller, .scrolled { overflow-x: auto; }.scroller > div { height: 1px; }.scrolled span { height: 100px; display: inline-block; width: 200vw; background: repeating-linear-gradient( 45deg, #fff, #fff 50px, #f5f5f5 50px, #f5f5f5 80px ); }

 <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script> <div id="app"> <div class="scroller" @scroll.passive="onScroll":scroll-left.camel="scrollLeft" > <div ref="dummy"></div> </div> <div ref="scrolled" class="scrolled" @scroll.passive="onScroll":scroll-left.camel="scrollLeft" > <span /> </div> </div>