vue 甘特图组件 vxe-gantt 修改滚动条样式-让滚动条自动隐藏

在甘特图中，内容区域通常较宽，滚动条会一直占据视觉空间。vxe-gantt 支持自定义滚动条样式，通过 scrollbarConfig.autoHide 可以让滚动条在不需要时自动隐藏，鼠标滚轮或拖拽内容时再显示，从而获得更简洁的界面效果。

功能概述

• 自定义滚动条：通过 useScrollbar: true 启用 vxe-gantt 内置的滚动条组件，替代浏览器原生滚动条。
• 自动隐藏：通过 scrollbarConfig.autoHide 控制滚动条是否在非活动状态下自动隐藏。
• 动态切换：配置项支持响应式绑定，可结合 vxe-switch 实时切换效果。
• 视觉统一：自定义滚动条在不同浏览器下表现一致，便于与整体主题统一。

核心配置

1. 启用自定义滚动条

useScrollbar: true

这是使用 scrollbarConfig 的前提。vxe-gantt 内部使用自定义滚动条组件替代浏览器原生滚动条，使得滚动条样式在所有浏览器下表现一致，也便于控制自动隐藏行为。

• 只有开启该配置，scrollbarConfig 才会生效。
• 未开启时使用浏览器原生滚动条，无法通过 scrollbarConfig 控制样式。

2. 配置滚动条自动隐藏

scrollbarConfig: {
  autoHide: true // 滚动条自动隐藏
}

• autoHide: true：滚动条在非滚动状态下自动隐藏，滚动时显示。
• autoHide: false：滚动条始终显示。

代码

<template>
  <div>
    自动隐藏:<vxe-switch v-model="ganttOptions.scrollbarConfig.autoHide"></vxe-switch>

    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const ganttOptions = reactive({
  border: true,
  height: 400,
  taskBarConfig: {
    showProgress: true,
    showContent: true
  },
  taskViewConfig: {
    tableStyle: {
      width: 480
    }
  },
  useScrollbar: true,
  scrollbarConfig: {
    autoHide: true
  },
  columns: [
    { type: 'seq', field: 'seq', width: 70 },
    { field: 'title', title: '任务名称', minWidth: 300 },
    { field: 'start', title: '开始时间', width: 100 },
    { field: 'end', title: '结束时间', width: 100 },
    { field: 'responsibleBy', title: '负责人', width: 140 },
    { field: 'description', title: '备注', width: 200 },
    { field: 'createBy', title: '创建人', width: 160 },
    { field: 'updateBy', title: '最后更新人', width: 180 },
    { field: 'createDate', title: '创建时间', width: 140 },
    { field: 'updateDate', title: '更新时间', width: 140 }
  ],
  data: [
    { id: 10001, title: '任务R790', start: '2024-03-01', end: '2024-03-04', progress: 3, responsibleBy: '张三', description: '', createBy: '小明', updateBy: '小陈', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/bq475.gif'], fileList: [{ name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg', size: 6054 }] },
    { id: 10002, title: '任务C30456572349', start: '2024-03-03', end: '2024-03-08', progress: 10, responsibleBy: '小徐', description: '', createBy: '小徐', updateBy: '小徐', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/bq673.gif'], fileList: [] },
    { id: 10003, title: '任务E563', start: '2024-03-03', end: '2024-03-11', progress: 90, responsibleBy: '李四', description: '不备注', createBy: '李四', updateBy: '老黄', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: [], fileList: [{ name: 'bq987.gif', url: 'https://vxeui.com/resource/img/bq987.gif', size: 6054 }] },
    { id: 10004, title: '任务P687', start: '2024-03-05', end: '2024-03-11', progress: 15, responsibleBy: '小陈', description: '', createBy: '小红', updateBy: '小陈', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj577.jpg'], fileList: [] },
    { id: 10005, title: '任务L8412430903', start: '2024-03-08', end: '2024-03-15', progress: 100, responsibleBy: '小李', description: '备注描述', createBy: '小李', updateBy: '小李', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: [], fileList: [] },
    { id: 10006, title: '任务B567', start: '2024-03-10', end: '2024-03-21', progress: 5, responsibleBy: '老六', description: '任务备注备注备注', createBy: '小陈', updateBy: '王五', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj124.jpeg'], fileList: [{ name: 'fj586.pn', url: 'https://vxeui.com/resource/img/fj586.png', size: 75064 }] },
    { id: 10007, title: '任务V513802134450', start: '2024-03-15', end: '2024-03-24', progress: 70, responsibleBy: '小红', description: '', createBy: '张三', updateBy: '小红', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj581.jpeg'], fileList: [] },
    { id: 10008, title: '任务G110', start: '2024-03-20', end: '2024-03-29', progress: 50, responsibleBy: '王五', description: '', createBy: '小明', updateBy: '小徐', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj586.png'], fileList: [{ name: 'fj843.jpg', url: 'https://vxeui.com/resource/img/fj843.jpg', size: 10240 }] },
    { id: 10009, title: '任务I802', start: '2024-03-19', end: '2024-03-20', progress: 5, responsibleBy: '老黄', description: '备注信息备注信息', createBy: '李四', updateBy: '小明', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: [], fileList: [] },
    { id: 10010, title: '任务K778', start: '2024-03-12', end: '2024-03-20', progress: 10, responsibleBy: '小明', description: '', createBy: '王五', updateBy: '老黄', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj843.jpg'], fileList: [] }
  ]
})
</script>

通过 useScrollbar 与 scrollbarConfig.autoHide 的配合，可以让甘特图的滚动条在不需要时自动隐藏，界面更加简洁。结合响应式绑定，还能实现动态切换，适配不同用户偏好或主题风格。

https://gantt.vxeui.com