Splitpanes实现同步滚动与粘性/固定头部的问题求助

在Vue项目中使用Splitpanes组件，想要实现类似代码对比的左右面板同步滚动效果，同时设置粘性/固定头部。目前已实现同步滚动，但自定义的sticky类未生效，粘性头部功能无法实现，求解决方法。

初始代码（Sandbox.vue） #

<template>
  <v-container fluid>
    <Splitpanes
      class="default-theme"
      style="height: 400px"
    >
      <Pane
        v-for="i in 2"
        :key="i"
      >
        <div class="pa-4">
          <div>Header</div>
          <div>
            <!-- very long text... -->
          </div>
        </div>
      </Pane>
    </Splitpanes>
  </v-container>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

export default {
  components: {
    Splitpanes,
    Pane
  }
}
</script>

<style scoped>
.splitpanes__pane {
  overflow-y: auto;
}
</style>

编辑 #1（已实现同步滚动，但粘性头部失效） #

<template>
  <v-container fluid>
    <v-card
      class="overflow-y-auto"
      height="400"
      outlined
      flat
    >
      <Splitpanes
        class="default-theme"
        style="height: auto"
      >
        <Pane min-size="1">
          <div class="sticky">
            Header
          </div>
          <div class="pa-4">
            <!-- Very long text... -->
          </div>
        </Pane>
        <Pane min-size="1">
          <div class="sticky">
            Header
          </div>
          <div class="pa-4">
            <!-- Very long text... -->
          </div>
        </Pane>
      </Splitpanes>
    </v-card>
  </v-container>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

export default {
  components: {
    Splitpanes,
    Pane
  }
}
</script>

<style>
.splitpanes.default-theme .splitpanes__pane {
  background: transparent;
}
.default-theme.splitpanes--vertical > .splitpanes__splitter {
  border-left: none;
}
.default-theme.splitpanes--vertical > .splitpanes__splitter::before,
.default-theme.splitpanes--vertical > .splitpanes__splitter::after {
  height: 100%;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
</style>

问题根源 #

position: sticky生效的核心前提是：粘性元素的父级容器不能设置overflow: hidden/auto/scroll。你当前的实现依赖外层v-card的overflow-y: auto实现同步滚动，但这导致粘性头部的滚动上下文被打乱，无法触发粘性定位逻辑。

修复步骤 #

1. 调整滚动容器层级
   把滚动容器从外层v-card移到每个Pane内部，让粘性头部和滚动内容处于同一层级，确保粘性元素的父容器（Pane）无滚动属性，滚动逻辑由内部容器承担。

2. 修改模板结构

<template>
  <v-container fluid>
    <Splitpanes
      class="default-theme"
      style="height: 400px"
    >
      <Pane min-size="1" v-for="i in 2" :key="i">
        <!-- 粘性头部 -->
        <div class="sticky-header">Header {{ i }}</div>
        <!-- 内部滚动容器 -->
        <div class="content-scroll">
          <div class="pa-4">
            {{ Array(100).fill('示例文本内容').join(' ') }}
          </div>
        </div>
      </Pane>
    </Splitpanes>
  </v-container>
</template>

3. 完善样式与同步滚动逻辑

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'

export default {
  components: { Splitpanes, Pane },
  mounted() {
    const scrollBoxes = document.querySelectorAll('.content-scroll')
    // 监听滚动事件，同步两个面板的滚动位置
    scrollBoxes.forEach((box, idx) => {
      box.addEventListener('scroll', () => {
        scrollBoxes.forEach((target, targetIdx) => {
          if (idx !== targetIdx) target.scrollTop = box.scrollTop
        })
      })
    })
  }
}
</script>

<style scoped>
.splitpanes__pane {
  overflow: visible !important; /* 取消Pane的滚动属性 */
}

.sticky-header {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  z-index: 10; /* 避免被滚动内容遮挡 */
}

.content-scroll {
  height: calc(100% - 60px); /* 减去头部高度，防止内容被遮挡 */
  overflow-y: auto;
}
</style>

<style>
/* Splitpanes主题全局调整 */
.splitpanes.default-theme .splitpanes__pane {
  background: transparent;
}
.default-theme.splitpanes--vertical > .splitpanes__splitter {
  border-left: none;
}
.default-theme.splitpanes--vertical > .splitpanes__splitter::before,
.default-theme.splitpanes--vertical > .splitpanes__splitter::after {
  height: 100%;
}
</style>

关键说明 #

• 滚动容器内移后，粘性头部的父容器（Pane）无overflow属性，满足sticky生效条件；
• 通过JS监听滚动事件实现面板同步，替代外层滚动的方案，避免粘性定位失效；
• 给粘性头部添加背景色和层级，防止滚动时被内容覆盖。

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