如何将第二个滚动条添加到顶部像底部滚动条？

Question

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

纯JS主题https://stackoverflow.com/a/50776007/1432751

https://jsfiddle.net/bqsw8pt9/2/

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

我试图在mount部分中添加纯js，但出现下一个错误：

Answer 1

要实现这一点：

1. 使用溢出属性创建两个元素，两个元素的宽度应相同，以使滚动行为保持一致。
2. 向第一个元素添加滚动处理程序，将第二个元素滚动到其当前位置，即，当元素1滚动到20时，元素2也滚动到20。
3. 向第二个元素添加滚动处理程序，它将第二个元素滚动到当前位置。
4. [为了确保两个元素都不会在同一实例上互相更新，请保持滚动状态，当它们中的任何一个触发滚动处理程序时，滚动状态都会更新。

请找到您的提琴的更新版本：link to fiddle

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;
    }
  }
})

作为旁注，我想建议您学习Vanilla JS，它可以使您更好地掌握javascript，还可以使您轻松理解任何框架中的任何代码，因此您可以随时对其进行调整您的需求。此答案基于StanleyH and HoldOffHunger

类似的答案