How to scroll the circle using mouse wheel?

Question

I have one circle and I have to rotate 360 deg using mouse scroll wheel or arrow but it will start when circle touches the blue border. Now my code is working when I scroll it and touch the blue border. But I have to scroll the circle using the mouse wheel. I mean using mouse wheel I have to rotate the circle also reverse.

Is there any idea how to do that?

$(window).bind('scroll', function() {
  var l_360 = document.getElementById("l_360");
  var controller = new ScrollMagic.Controller();
  var tween = TweenLite.to(l_360, 3, {
    x: -1910,
    y: 350,
    rotation: 360,
    opacity: '1',
    ease: Linear.easeOut
  });
  var scene = new ScrollMagic.Scene({
      triggerElement: "#l_360"
    })
    .setTween(tween)
    .setClassToggle('#l_360', 'fade-in')
    .addTo(controller);

});

.parent_img {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  text-align: right;
}

.content,
.content_2,
.content_3 {
  width: 700px;
  position: relative;
}

.content {
  margin-top: 400px;
}

.main_l {
  position: fixed;
  right: 115px;
  top: 20px;
  z-index: 100;
}

.main_l .l_circle {
  width: 250px;
  height: 250px;
  background-color: #EFBD40;
  border-radius: 50%;
  display: flex;
}

.main_l .l_circle h2 {
  margin: auto;
  color: #fff;
  font-size: 35px;
}

.blue {
  background-color: #0082ff;
  transform: skew(0deg, -10deg);
  z-index: -1;
  /*color: #fff;*/
}

.blue .container {
  transform: skew(0deg, 10deg);
  position: relative;
  top: 50px;
}

<div class="main_l" id="l_360">
  <div class="l_circle">
    <h2>360 circle</h2>
  </div>
</div>

<div class="blue">
  <div class="container">
    <div class="content">
      <h2>This is just for testing</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

Answer 1

Using the wheel event will give you deltas for the direction you scroll the wheel. For example, to detect a vertical wheel movement the property deltaY will be either a negative value (forward) or positive (backward):

You can use the value directly if you wish, but it may vary depending on browser and system.

Example

var div = document.querySelector("div");
var angle = 0;
document.onwheel = function(e) {
  if (e.deltaY) {                   // we have a wheel for vertical (common) direction
    e.preventDefault();
    angle += e.deltaY < 0 ? 4 : -4; // what direction?
    div.style.transform = "rotate(" + angle + "deg)"; // do something
  }
};

body {margin:30px}
div {border-radius:50%;border:3px solid #09f;width:150px;height:150px;}

<div> O</div>