Vue 2.0 Hello World

by phainix

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
<div class="wrapper1" v-on:scroll.passive='handleScroll1' ref="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2" v-on:scroll.passive='handleScroll2' ref="wrapper2">
  <div class="div2">{{ message }}</div>
 </div>
</div>

CSS

.wrapper1, .wrapper2{width: 300px; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;}
.wrapper1{height: 20px; }
.wrapper2{height: 200px; }
.div1 {width:1000px; height: 20px; }
.div2 {width:1000px; height: 200px; background-color: #88FF88;
overflow: auto;}

JavaScript

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