在 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>