如何使用鼠标滚轮滚动圆圈？

Question

我有一个圆圈，我必须使用鼠标滚轮或箭头旋转 360 度，但它会在圆圈触及蓝色边框时开始。现在，当我滚动它并触摸蓝色边框时，我的代码正在工作。但我必须使用鼠标滚轮滚动圆圈。我的意思是使用鼠标滚轮我还必须反向旋转圆圈。

你知道怎么做吗？

$(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

使用wheel 事件将为您提供滚动滚轮方向的增量。例如，要检测车轮的垂直运动，属性deltaY 将是负值（向前）或正值（向后）：

您可以根据需要直接使用该值，但可能因浏览器和系统而异。

示例

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>