Vue.js 如何将第二个滚动条添加到与底部滚动条类似的顶部滚动条？

我有大于浏览器大小的Vue组件。所以浏览器添加到它的底部滚动条。我需要上面的第二个。我没有任何代码显示，因为我不知道如何做。我在谷歌上搜索到了纯查询解决方案，但我不知道如何将它们集成到Vue项目中

纯JS主题

我试图在mount部分添加纯js，但出现了下一个错误： 要实现这一点：

使用overflow属性创建两个元素，两个元素的宽度应相同，这样滚动行为将是一致的。 向第一个元素添加滚动处理程序，将第二个元素滚动到其当前位置，即当元素1滚动到20时，也将元素2滚动到20。 向第二个元素添加一个滚动处理程序，它将第一个元素滚动到其当前位置。 为了确保这两个元素没有试图在同一个实例中互相更新，请维护一个滚动状态，当它们中的任何一个触发滚动处理程序时，滚动状态将被更新。 请查找您的小提琴的更新版本：

作为旁注，我想建议您学习Vanilla JS，它将使您更好地掌握javascript，并使您能够轻松理解任何框架中的任何代码，以便您始终能够根据需要对其进行调整。

---

这个答案基于一个类似的答案

你必须给我们至少预期的输出和输入，可能是链接纯jquery解决方案，以便我们知道你想要实现什么？我提出了一个非常粗糙的解决方案，你可以在我使用你的解决方案中找到它provided@Minato但底部的卷轴已被取消。谢谢！如果仔细检查一些div没有关闭，那么问题出在html元素上。div应该是这样的：检查

new Vue({
  el: '#app',
  data: {
    message: 'Very loooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeexttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt'
  }
})

new Vue({
  el: '#app',
  data: {
    message: 'Very loooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeexttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt',
    scrolling: false
  },
  methods: {
    handleScroll1: function () {
            if(this.scrolling) {
            this.scrolling = false;
          return;
        }
            this.scrolling = true;
      console.log(this.scrolling, this.$refs["wrapper1"].scrollLeft);
      this.$refs["wrapper2"].scrollLeft = this.$refs["wrapper1"].scrollLeft;
    },
    handleScroll2: function () {
            if(this.scrolling) {
            this.scrolling = false;
          return;
        }
            this.scrolling = true;
      console.log(this.scrolling, this.$refs["wrapper2"].scrollLeft);
      this.$refs["wrapper1"].scrollLeft = this.$refs["wrapper2"].scrollLeft;
    }
  }
})