Slow Vue style binding

Question

Vue seems very slow in dynamic style binding (in comparison with jQuery):

I have a container with overflow-x , also inner-container which is wider than it's parent. And two buttons with absolute position.

• First button style attribute is rendered by Vue
• Second button style attribute is rendered by jQuery

During container scrolling the first button style updating is very slow. jQuery's is much faster.

Is there is a way somehow to increase its rendering speed?

Here's the code:

 new Vue({ el: "#app", data: { left_offset : 0, $b2 : null }, computed:{ _left_offset_style(){ return `left:${this.left_offset}px`; } }, mounted(){ this.$b2 = $(this.$el).find('.b2'); }, methods: { scrollMe(e){ this.left_offset = parseInt($(e.target).scrollLeft()); this.$b2.css({left:`${this.left_offset}px`} ); } } })

 .container { width: 400px; height: 200px; overflow-x: auto; overflow-y: hidden; position: relative; } .inner-container{ width: 800px; height: 200px; } button{ position: absolute; width: 100px; } .b2{ top: 40px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="app"> <div class="container" @scroll="scrollMe"> <button :style="_left_offset_style" class="b1">b1</button> <button class="b2">b2</button> <div class="inner-container"></div> </div> </div>

Answer 1

Is there is a way somehow to increase it's rendering speed?

You do not need jquery at all. Just add a ref on the b1 button and use it to change the left CSS property based on the scrollLeft in the scroll listener

html

<div id="app">
  <div class="container" @scroll="scrollMe">
    <button ref="b1" class="b1">b1</button>
    <div class="inner-container"></div>
  </div>
</div>

script

new Vue({
  el: "#app",
  methods: {
    scrollMe(e) {
      console.log("scroll left", e.target.scrollLeft);
      this.$refs.b1.style.left = e.target.scrollLeft + "px";
    }
  }
});

Here is the updated fiddle

Answer 2

If I understand the effect you're trying to achieve (adding some fixed buttons that hover over a scrollable container) then you don't need Vue or JQuery to achieve that effect at all, you can do it entirely using HTML & CSS.

 .container { position: relative; } button { width: 100px; height: 20px; position: absolute; } .btn-1 { top: 0; left: 0; } .btn-2 { top: 30px; left: 0; } .scroll-container { width: 400px; height: 200px; overflow-x: auto; overflow-y: hidden; } .scrollable-content { width: 800px; height: 200px; }

 <div class="container"> <button class="btn-1">b1</button> <button class="btn-2">b2</button> <div class="scroll-container"> <div class="scrollable-content"></div> </div> </div>

Also, FYI, Vue batches changes and executes DOM updates in cycle, docs: https://v2.vuejs.org/v2/api/#Vue-nextTick