基于horizontal scrollbar on top and bottom of table

<template>
  <div id="app">
    <div class="wrapper1" ref="wrapper1" @scroll="onScrollWrapper1">
      <div class="div1"></div>
    </div>
    <div class="wrapper2" ref="wrapper2" @scroll="onScrollWrapper2">
      <div class="div2">
        aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb
        cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd aaaa bbbb cccc dddd
      </div>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'

export default {
  name: "App",
  setup() {
    const wrapper1 = ref()
    const wrapper2 = ref()

    const  onScrollWrapper1 = () => {
      wrapper2.value.scrollLeft = wrapper1.value.scrollLeft
    }

    const  onScrollWrapper2 = () => {
      wrapper1.value.scrollLeft = wrapper2.value.scrollLeft
    }

    return {
      wrapper1,
      wrapper2,
      onScrollWrapper1,
      onScrollWrapper2,
    }
  }
};
</script>

<style>
.wrapper1,
.wrapper2 {
  width: 300px;
  border: none 0px RED;
  overflow-x: scroll;
  overflow-y: hidden;
}
.wrapper1 {
  height: 20px;
}
.wrapper2 {
  height: 200px;
}
.div1 {
  width: 1000px;
  height: 20px;
}
.div2 {
  width: 1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}
</style>

实时示例CodeSandbox