How to add scroll second scroll to top like bottom scroll? - vue.js

Question

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
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:

Answer 1

To achieve this:
Create two elements with the overflow property, both elements should be of the same width so the scroll behaviour will be uniform.
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.
Add a scroll handler to the second element, which will scroll the first element to its current position.
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