[Vuejs]-How to add scroll second scroll to top like bottom scroll?

by

1👍

✅

To achieve this:

  1. Create two elements with the overflow property, both elements should be of the same width so the scroll behaviour will be uniform.
  2. Add a scroll handler to the first element that scrolls the second element to its current position i.e. when element 1 scrolls to 20, scroll element 2 to 20 also.
  3. Add a scroll handler to the second element, which will scroll the first element to its current position.
  4. To ensure that both elements aren’t trying to update each other at the same instance, maintain a scroll state that is updated when either of them fires the scroll handler.

Please find an updated version of your fiddle: 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;
    }
  }
})

As a side note i want to suggest that you learn Vanilla JS, it’ll give you a better grasp of javascript, and also make it easy for you to understand any piece of code in whatever framework so you can always adapt it to your needs.
This answer is based on a similar one by StanleyH and HoldOffHunger

👤phainix

Leave a comment