0

I have Vue component that greater than browser size. So browser add to bottom of it scrollbar. I need second one at top. I do not have any code to show, because I do not know how to do it. I have googled and found only pure\jquery solutions, but I do not know how to integrate them in Vue project.

The pure JS topic https://stackoverflow.com/a/50776007/1432751

enter image description here

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

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

I tried to add pure js in mount section, but got next error: enter image description here

Dmitry Bubnenkov
  • 9,415
  • 19
  • 85
  • 145
  • 2
    You have to give us at least the expected output and input, may be link the pure jquery solutions, so that we know what is that you're trying to achieve? – Minato Oct 02 '19 at 13:06
  • I have come up with a very crude solution you can find it in my [jsFiddle](https://jsfiddle.net/19Lm5uxp/1/) using the solution you provided – Minato Oct 02 '19 at 13:42
  • @Minato but bottom scroll is disapared – Dmitry Bubnenkov Oct 02 '19 at 14:12

1 Answers1

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
  • 179
  • 2
  • 9
  • big thanks! Could you please show what wrong here https://jsfiddle.net/bp7xzwj1/2/ ? – Dmitry Bubnenkov Oct 03 '19 at 12:13
  • 1
    The problem was with your html elements, if you check closely some divs were not closed. The divs should look like this: `
    ` Check [this fiddle](https://jsfiddle.net/phainix/75ksobm0/4/)     – phainix Oct 03 '19 at 18:56