时间戳

首页 > 解决方案 > 如何像底部滚动一样将滚动第二个滚动添加到顶部？

vue.js - 如何像底部滚动一样将滚动第二个滚动添加到顶部？

问题描述

我的 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，但出现下一个错误： 在此处输入图像描述

标签： vue.js

解决方案

为达到这个：

  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 和 HoldOffHunger的类似答案

推荐阅读