又是熟悉的对话

产品："小王，这个表格用户体验不好啊，用户要滚动到底部才能看到横向滚动条，能不能把滚动条固定在页面底部？"

我："emmm... 这个... 技术上可以实现，但是..."

产品："那就这么定了！明天上线！"

我：

相信很多前端同学都遇到过类似的场景。面对超宽的 el-table，用户确实需要先滚动到表格底部才能进行左右滚动，体验确实不够友好。

干！

于是一个通用的水平滚动条组件 vue-horizontal-scrollbar 诞生了！

快速体验

想看看实际效果？访问在线演示

最终的解决方案

<template>
<el-table style="width: 100%">
</el-table>

<HorizontalScrollbar
:target-selector="getSelector('.el-table__body-wrapper .el-scrollbar .el-scrollbar__wrap')"
:content-selector="getSelector('.el-table__body-wrapper .el-scrollbar .el-scrollbar__view')"
/>
</template>
<script setup>
import { ref } from 'vue'
import { VueHorizontalScrollbar } from 'vue-horizontal-scrollbar'
import "vue-horizontal-scrollbar/dist/style.css"
function getSelector(selector: string) {
const elements = document.querySelectorAll<HTMLElement>(selector) // 兼容展开行
if (elements.length) {
return elements[elements.length - 1]
}
else {
console.warn(`Selector "${selector}" did not match any elements.`)
return null
}
}
//  tips: 如果是有侧边菜单的管理系统需要动态修改vue-horizontal-scrollbar-container的left
</script>

这样做的好处

用户体验升级

滚动条始终可见，无需滚动页面
位置固定，操作便捷
支持键盘和鼠标滚轮操作

开发体验友好

一行代码解决问题
不破坏原有组件结构
支持任意 DOM 元素

高度可定制

<template>
<div>
<!-- Your scrollable content -->
<div id="scroll-container" style="overflow-x: auto; width: 100%;">
<div id="scroll-content" style="width: 2000px; height: 200px;">
<!-- Wide content here -->
<p>This content is wider than the container...</p>
</div>
</div>

<!-- Horizontal Scrollbar -->
<VueHorizontalScrollbar
target-selector="#scroll-container"
content-selector="#scroll-content"
:auto-show="true"
@scroll="onScroll"
/>
</div>
</template>
<script setup>
import { VueHorizontalScrollbar } from 'vue-horizontal-scrollbar'
import "vue-horizontal-scrollbar/dist/style.css"
function onScroll(info) {
console.log('Scroll info:', info)
// { scrollLeft: 100, maxScroll: 1000, scrollPercent: 10 }
}
</script>

Features

Vue 3 & TypeScript - Full TypeScript support with Vue 3 Composition API
Customizable - Flexible styling and configuration options
Accessible - ARIA labels and keyboard navigation support
Touch Friendly - Mobile-friendly touch gestures
Performance - Optimized with throttling and efficient updates
Flexible - Works with any scrollable content
Event Rich - Comprehensive event system for interactions
Lightweight - Minimal dependencies

API Reference

Props

Prop	Type	Default	Description
targetSelector	string \| Function	—	Required. CSS selector or function returning the scroll container element
contentSelector	string \| Function	—	Required. CSS selector or function returning the content element
autoShow	boolean	true	Auto show/hide scrollbar based on content width
minScrollDistance	number	50	Minimum scroll distance to show scrollbar (when autoShow is true)
height	number	16	Scrollbar height in pixels
enableKeyboard	boolean	true	Enable keyboard navigation (Arrow keys, Home, End)
scrollStep	number	50	Scroll step for keyboard navigation
minThumbWidth	number	30	Minimum thumb width in pixels
throttleDelay	number	16	Throttle delay for scroll events in milliseconds
zIndex	number	9999	Z-index for the scrollbar
disabled	boolean	false	Disable the scrollbar
ariaLabel	string	'Horizontal scrollbar'	ARIA label for accessibility
teleportTo	string	'body'	Teleport to target element

立即使用

bash

npm install vue-horizontal-scrollbar

结语

从此以后，再也不怕产品提这种"奇葩"需求了！

产品："这个滚动条能不能再加个渐变效果？"

我："没问题！改个 CSS 就行！"

产品："能不能支持触摸滑动？"

我："早就支持了！"

万普插件库

jQuery插件大全与特效教程

Table滚动条到底能不能‘滚’到页面底部?”