Vuetify v-data-table 实现顶部和底部水平滚动条-html教程-PHP中文网

Vuetify v-data-table 实现顶部和底部水平滚动条

霞舞

发布： 2025-10-18 12:45:01

原创

876人浏览过

vuetify v-data-table 实现顶部和底部水平滚动条

本文介绍了如何在 Vuetify 的 `v-data-table` 组件中同时实现顶部和底部的水平滚动条。通过创建辅助元素并同步滚动行为，可以突破单个元素只能拥有一个方向滚动条的限制。提供了原生 JavaScript 和 Vue 两种实现方式，帮助开发者灵活地应用到自己的项目中。

在默认情况下，Vuetify 的 v-data-table 组件只会在底部显示水平滚动条。然而，在某些场景下，为了更好的用户体验，可能需要在表格的顶部也显示一个水平滚动条，方便用户在浏览大量数据时无需滚动到底部即可进行横向滚动。

实现这个效果的核心思路是：由于一个 HTML 元素在同一个方向上只能有一个滚动条，因此我们需要创建两个元素，一个作为实际的内容展示区域（即 v-data-table），另一个作为辅助的滚动条展示区域，然后通过 JavaScript 代码将两个元素的滚动行为同步起来。

使用原生 JavaScript 实现双向水平滚动条

以下是一个使用原生 JavaScript 实现双向水平滚动条的示例代码：

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

#_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
  );
}

登录后复制

window.addEventListener("DOMContentLoaded", () => {
  const _a = document.getElementById('_a');
  const _b = document.getElementById('_b');
  const dummy = document.getElementById('dummy');

  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));
});

登录后复制

代码解释：

HTML 结构： 创建两个 div 容器 _a 和 _b。 _a 用于模拟顶部滚动条，内部包含一个 dummy 元素，用于撑开宽度。_b 包含实际的内容区域 content。
CSS 样式： 设置 _a 和 _b 的 overflow-x: auto 属性，使其可以水平滚动。 content 的 width 设置为 200vw，模拟超出容器宽度的内容，触发水平滚动条。
JavaScript 代码：
- updateScrollers 函数：动态设置 dummy 元素的宽度，使其与 content 的宽度一致，保证顶部滚动条的正确显示。
- linkScroller 函数：监听滚动事件，将一个滚动条的滚动距离同步到另一个滚动条。
- 使用 forEach 循环，将两个滚动条互相绑定，实现双向同步滚动。

使用 Vue 实现双向水平滚动条

以下是一个使用 Vue 实现双向水平滚动条的示例代码：

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

<template>
  <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></span>
    </div>
  </div>
</template>

<script>
import { createApp, onMounted, onBeforeUnmount, reactive, toRefs } from 'vue';

export default {
  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(() => {
      state.scrolled = this.$refs.scrolled;
      state.dummy = this.$refs.dummy;
      window.addEventListener('resize', updateScroller);
      updateScroller();
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', updateScroller);
    });

    return toRefs(state);
  },
};
</script>

<style scoped>
.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
  );
}
</style>

登录后复制

代码解释：

HTML 结构： 与原生 JavaScript 示例类似，创建两个 div 容器 scroller 和 scrolled，分别用于模拟顶部滚动条和展示实际内容。使用 ref 属性获取 DOM 元素。
CSS 样式： 与原生 JavaScript 示例相同，设置滚动条样式和内容宽度。
Vue 代码：
- 使用 reactive 创建响应式状态，包括 scrollLeft (滚动距离), scrolled 和 dummy (DOM 元素引用)。
- onScroll 函数：监听滚动事件，更新 scrollLeft 的值。
- updateScroller 函数：动态设置 dummy 元素的宽度，使其与 scrolled 的宽度一致。
- onMounted 钩子：在组件挂载后，获取 DOM 元素引用，并添加 resize 事件监听器。
- onBeforeUnmount 钩子：在组件卸载前，移除 resize 事件监听器。
- 使用 :scroll-left.camel="scrollLeft" 将 scrollLeft 的值绑定到滚动条的 scrollLeft 属性，实现滚动条的同步。