Question

我试图在点按“.box＆＃39;”时检查滚动方向。当我到达＆＃39; .box＆＃39;如果我向下滚动身体将变为黄色，向上滚动时变为绿色。但滚动条件已经通过＆＃39; .box＆＃39;滚动条件继续运行时我有问题，我试着将它带回白色，否则也无法正常工作。

我怎样才能阻止这种情况？谢谢

＆＃13;

$(window).scroll(function() {
  var st = $(this).scrollTop();

  var box = $('.box').offset().top;
  var boxHeight = $('.box').height();
  if (st > box && st >= boxHeight) {
    $(window).bind('mousewheel', function(event) {
      if (event.originalEvent.wheelDelta >= 0) {
        $('body').css('background-color', 'green');
      } else {
        $('body').css('background-color', 'yellow');
      }
    });
  } else {
    $('body').css('background-color', 'white');
  }
});

＆＃13;

.box {
  width: 100%;
  height: 500px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="box"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

＆＃13;

Answer 1

您可以使用jQuery文档中描述的jQuery .off()，或者我首选的方法是简单地使用带有条件语句的变量来确定是否采取行动。

然而，您应该使用jQuery .on(funct...)而不是.bind(functi...)，因为在较新版本的jQuery中不推荐使用它。

下面的代码段，带有评论

var boxState = false;

$(window).on({
  scroll: function() {
    var st = $(this).scrollTop(),
      box = $('.box').offset().top,
      winHeight = $(this).height(),
      boxHeight = $('.box').height();

    boxState = (st < box + boxHeight && st + winHeight > box); // is box in window? if so boxState will be true
  },
  mousewheel: function(e) {
    var wheel = e.originalEvent.wheelDelta;
    if (wheel >= 0 && boxState) { // use the boxState variabel to determine whether or not to act
      $('body').css('background-color', 'green');
    } else if (wheel < 0 && boxState) {
      $('body').css('background-color', 'yellow');
    } else {
      $('body').css('background-color', 'white');
    }
  }
});

.box {
  width: 100%;
  height: 100px;
  background-color: red;
}

#monitor {
  position: fixed;
  left: 1em;
  bottom: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="box"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id='monitor'></div>

如何用鼠标滚轮方向停止检查状态

1 个答案: