pin element with scrollmagic related to div

I have created a simple animation with ScrollMgic: a weel rotating while horizontally scrolling the page. The problem is that when scrolling the window page the animation appears smooth, while when scrolling just the div inside which the element is placed, the animations is quite "jerk".

I would like to hide the window scroll leaving just the div scroll, keeping the animation smoth.

Does anyone know why and how to solve this problem?

var controller = new ScrollMagic.Controller({
  vertical: false
});

var tween = TweenMax.to("#weel", 1, {
  rotation: 1080,
  ease: Linear.easeNone
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 5000
  })
  .setTween(tween)
  .setPin("#weel", {
    pushFollowers: false
  })
  .addIndicators() // add indicators (requires plugin)
  .addTo(controller);

body {}

.weel img {
  width: 100px;
}

#scrolldiv {
  height: 500px;
  width: 5000px;
  background: url(bgterritorio.jpg);
  position: relative;
}

.scrollcontainer {
  overflow-x: scroll;
  white-space: nowrap;
  position: relative;
}

<div class="scrollcontainer">
  <div id="scrolldiv" class="scrolldiv">
    <div class="weel">
      <img id="weel" src="weel.png" alt="">
    </div>
  </div>
  <div id="trigger">
  </div>
</div>

from pin element with scrollmagic related to div