scrollTop not updated in component

I have a problem with scrollTop in a component.

Based on this example https://codepen.io/fillthegap/pen/MWJbgvW

First I created a small VUEJS project that doesn’t do much more than this Codepen. I used interactjs to create a movable and rotatable card with a scrollable text field in it. The text can be scrolled at the same time on a desktop multitouch screen. The events are required for this. A scroll field could be implemented with the standard scroll, but the scroll blocks the scroll on the other text

In this small example it works perfectly with router, slots and interactivity. If I output the old and new scrollTop value while scrolling, it is always correct:

old, new
0, 10
10, 19
19, ...

so on the next frame the scrollTop is as expected.

Now it’s getting strange, I’ve integrated that into a somewhat larger project, 4K fullscreen, suddenly the scroll is extremely slow, the events arrive, the correct target is determined, values ​​are OK, only when I look at the output something strange happens, the scrollTop is only updated after every umpteenth frame, and then not completely. only partially.

old, new
153 157
153 155
153 157
155 157
155 159
156 162
156 158
158 164
158 160

I switched off everything that performance draws, always the same.

here’s the move method:

scrollMove( event ){
            // console.log("scrollmove", event);
            for ( var i=0; i<event.touches.length; i++ ) {
                var index = this.touchedTargets.indexOf( event.touches[i].target );
                if ( index > -1 ) {
                    // console.log(this.touchedData[index]);
                    // console.log("scrollerMove");
                    var oldScrollTop = this.touchedData[index].scroller.scrollTop;
                    this.scrollTop = this.touchedData[index].scroller.scrollTop + ( event.touches[i].clientY - this.touchedData[index].y );
                    
                    var el = this.touchedData[index].scroller
                    this.touchedData[index].scroller.scrollTop = this.scrollTop;
               
                    // this.scrollTop = this.scrollTop + ( event.touches[i].clientY - this.touchedData[index].y );
                    // this.touchedData[index].scroller.scrollTop = this.scrollTop;
                    // console.log(this.touchedData[index].scroller.scrollTop, this.touchedData[index].y, event.touches[i].clientY);
                    this.touchedData[index].y = event.touches[i].clientY;
                    console.log(oldScrollTop, this.scrollTop);
                    event.preventDefault();
                }
            }
        },

I tried to call use nextTick in the move method. which parameters can influence the scrolling behavior, why is the scrollTop not set directly? reactivity?

somehow I don’t see the problem

  this.$nextTick(() => {
         this.touchedData[index].scroller.scrollTop = this.scrollTop;
  });

ok, I found the troublemaker, when scroll-bahaviour is set to smooth the scrollTop value is not updated as expected. Now I set the behaviour to unset on touchstart and to smooth on touchend.

me same as well… first not working but next time working…

showCHat 1 = 0 964
showCHat 2 = 342 964