Electron中如何用HTML/CSS实现不绑定容器的独立scrollbar并触发事件

Electron下完全可以实现和旧版VB一致的独立滚动条控件，不需要绑定任何内容容器，滚动操作触发自定义事件的逻辑也可以完全对齐，有两种成熟的实现路径，按需选择即可。

旧VB里的独立滚动条本质就是个单独的交互控件，不依附内容存在，值变化时抛出事件供业务逻辑调用，你完全可以自己实现逻辑完全匹配的控件：

• 核心结构分为滚动轨道和滑块两部分，通过监听鼠标事件计算滑块位置，对外暴露值变化事件，不需要依赖任何overflow: scroll的容器
• 可以自定义配置和VB滚动条一致的核心属性：Min（最小值）、Max（最大值）、SmallChange（小幅调整步长）、LargeChange（大幅调整步长）
• 基础实现代码参考：

<!-- 独立水平滚动条，可放置在页面任意位置，无需嵌套在滚动容器内 -->
<div class="scrollbar-h" id="hScrollBar">
  <div class="scrollbar-thumb"></div>
</div>

<style>
.scrollbar-h {
  width: 320px;
  height: 12px;
  background: #f1f1f1;
  position: relative;
  cursor: pointer;
  border-radius: 6px;
}
.scrollbar-h .scrollbar-thumb {
  position: absolute;
  top: 2px;
  height: 8px;
  width: 60px;
  background: #c1c1c1;
  border-radius: 4px;
  cursor: grab;
}
.scrollbar-h .scrollbar-thumb:active {
  cursor: grabbing;
  background: #a8a8a8;
}
</style>

<script>
const bar = document.getElementById('hScrollBar')
const thumb = bar.querySelector('.scrollbar-thumb')
// 对齐VB滚动条的配置参数
const scrollConfig = { min: 0, max: 100, smallChange: 1, largeChange: 10 }
let currentValue = 0
let dragging = false

// 触发滚动事件，业务侧监听这个事件即可拿到当前值
function emitScrollEvent() {
  document.dispatchEvent(new CustomEvent('vb-style-scroll', {
    detail: { value: currentValue, type: 'horizontal' }
  }))
}

// 滑块拖拽逻辑
thumb.addEventListener('mousedown', (e) => {
  dragging = true
  const startX = e.clientX
  const startLeft = thumb.offsetLeft
  const maxThumbOffset = bar.clientWidth - thumb.offsetWidth

  const onMouseMove = (moveE) => {
    if (!dragging) return
    let offset = startLeft + (moveE.clientX - startX)
    offset = Math.max(0, Math.min(offset, maxThumbOffset))
    thumb.style.left = `${offset}px`
    currentValue = Math.round(scrollConfig.min + (offset / maxThumbOffset) * (scrollConfig.max - scrollConfig.min))
    emitScrollEvent()
  }

  const onMouseUp = () => {
    dragging = false
    document.removeEventListener('mousemove', onMouseMove)
    document.removeEventListener('mouseup', onMouseUp)
  }

  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
})

// 点击轨道跳转逻辑
bar.addEventListener('click', (e) => {
  if (e.target === thumb) return
  const maxThumbOffset = bar.clientWidth - thumb.offsetWidth
  let offset = e.offsetX - thumb.offsetWidth / 2
  offset = Math.max(0, Math.min(offset, maxThumbOffset))
  thumb.style.left = `${offset}px`
  currentValue = Math.round(scrollConfig.min + (offset / maxThumbOffset) * (scrollConfig.max - scrollConfig.min))
  emitScrollEvent()
})

// 业务侧绑定事件示例
document.addEventListener('vb-style-scroll', (e) => {
  console.log('滚动条当前值：', e.detail.value)
  // 这里写任意业务逻辑，不需要和内容滚动绑定，比如调整参数、控制其他元素位置都可以
})
</script>

• 垂直滚动条只需要把上述代码里的水平方向尺寸、偏移计算逻辑换成垂直方向即可，样式可以根据需求调整成和系统原生滚动条完全一致，也可以自定义设计风格。

如果不想手写拖拽、键盘交互逻辑，想直接复用系统原生滚动条的所有行为和样式，可以把原生滚动条和内容容器的绑定关系拆开：

• 实现逻辑：创建一个尺寸极小的空容器，设置overflow: scroll，内部塞入占位元素撑出滚动条，通过CSS定位把这个容器的滚动条部分移动到你需要放置独立滚动条的位置，容器本身设为透明
• 直接监听这个空容器的scroll事件，拿到的scrollTop/scrollLeft就是滚动条的当前值，业务逻辑完全独立，不需要把实际内容放到这个容器里
• 注意：这个方案的滚动条是操作系统原生渲染的，不同系统下滚动条宽度、自动隐藏逻辑会有差异，适合不需要自定义样式的场景。

如果需要完全对齐旧VB滚动条的行为，可以给封装的滚动条对象补充几个常用能力：

• 滚轮操作时按SmallChange步长调整值
• 键盘聚焦后按方向键、PageUp/PageDown键对应调整步长
• 暴露Value属性支持直接代码设置滚动条位置

内容的提问来源于stack exchange，提问作者xis