滚动条联动

在线预览

在线预览详细版

😅 又是熟悉的对话

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

我："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 就行！"

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

我："早就支持了！"

项目地址：GitHub
NPM 包：vue-horizontal-scrollbar

如果这个组件帮到了你，记得给项目点个 ⭐ 哦！让我们一起让前端开发变得更轻松！🎉