How to Customize Custom Scrollbars for Complex Vue Components

In many enterprise projects we need complex table features such as multi‑header layouts, and we often use vxe-table . Unlike Element Plus, vxe-table does not allow custom scrollbar styling, which leaves an unsightly empty area on the right side of the table.

We faced the same limitation when using the popular vue-gantt-elastic library for Gantt charts – it also lacks support for custom scrollbars. The native Windows scrollbar looks out of place, and CSS Scrollbars Styling Module provides only minimal properties (width, color), insufficient for the richer animations and interactions users expect on desktop.

Searching for a Simple Solution

Replacing vxe-table with Element Plus is unrealistic because it would require a full component migration. We only wanted to change the scrollbar appearance.

Element Plus offers an ElScrollbar component, but it only works for simple scrolling containers. In complex nested scenarios the component cannot determine which element’s scroll offset to use, leading to conflicts between virtual and native scrollbars.

The Birth of use-scrollbars

After experimenting with many open‑source solutions that failed to meet the “one‑click replace” requirement for vxe-table and vue-gantt-elastic , I revisited browser scrolling fundamentals and built a lightweight Vue hook called use-scrollbars .

use-scrollbars has the following characteristics:

It supports customizing scrollbars for complex components.

It provides richer styles, animations, and interaction effects than native scrollbars.

It uses native scroll events instead of low‑performance CSS transforms.

Its state is reactive and comes with full TypeScript type hints.

The first point directly addresses the need to modify scrollbars in vxe-table and similar components, something other open‑source libraries cannot achieve. The second and third points reduce code complexity, while the fourth ensures a type‑safe development experience.

Usage Example

For a simple scrolling container the API is straightforward:

<template>
  <div ref="elemRef">
    long content long content ...
    long content long content ...
    long content long content ...
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useScrollbar } from 'use-scrollbars'

const elemRef = ref(null)
const barStates = useScrollbar(elemRef)
</script>

To customize a complex component like vxe-table , the steps are:

Identify the scrolling elements using DevTools.

Initialize them with useScrollbar .

Adjust CSS to hide the native scrollbar and style the virtual one.

Step 1 – select elements:

const $table = tableRef.value.$el;
const $header = $table.querySelector('.vxe-table--header-wrapper');
const $bodyWrapper = $table.querySelector('.vxe-table--body-wrapper');
const $bodyContent = $table.querySelector('.vxe-table--body');
const $bodyXSpace = $table.querySelector('.vxe-body--x-space');
const $bodyYSpace = $table.querySelector('.vxe-body--y-space');

Step 2 – initialize:

const barStates = useScrollbar();
barStates.init({
  mount: tableRef,
  content: [$bodyWrapper, $bodyContent, $bodyXSpace, $bodyYSpace],
  viewport: [$bodyWrapper]
});

Step 3 – hide the native scrollbar and add custom styles:

.vxe-table--body-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* ...and more custom CSS */

The final visual comparison shows the native scrollbar versus the themed use-scrollbars implementation.

If you are a vxe-table user, you can copy the provided demo component directly into your project; it works for both regular and virtual scrolling tables. Feel free to ask questions about applying use-scrollbars to other components, and contributions are welcome.

Also, use-scrollbars welcomes stars and pull requests!