Table滚动条到底能不能‘滚’到页面底部?”
又是熟悉的对话
产品："小王，这个表格用户体验不好啊，用户要滚动到底部才能看到横向滚动条，能不能把滚动条固定在页面底部？"
我："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 就行！"
产品："能不能支持触摸滑动？"
我："早就支持了！"