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>
<!-- 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>
https://i.sstatic.net/yA9VG.png
How can I achieve synchronized scrolling (scrolling left and right) and a fixed header for this layout?
Edit #1
This is how I achieved synchronized scrolling:
<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">
<!-- Long text... -->
</div>
</Pane>
<Pane min-size="1">
<div class="sticky">
Header
</div>
<div class="pa-4">
<!-- 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>
I tried creating a sticky class for the header but it doesn't seem to work. Any suggestions on achieving this?