javascript - 如何操纵每次滚动运动的值？

Question

我想操纵每个滚动条上的 sum 值。如果我向下滚动，该值应该增加到我想要的任何值，如果我向上滚动，该值应该减少到我想要的任何值，只要它不小于零。

$(window).on('wheel', function(e) {

    var delta = e.originalEvent.deltaY;
    var sum = 0;
    if (delta > 0){
        sum++;
        console.log("going down");
        console.log(sum);

    } else {
      //sum--;
        console.log("going up");
    }
    return false;
});

html,
  body{
    height: 100%;
  }
  #firstbox{
    background: red;
  }

  #second_box{
    background: blue;
  }

  #third_box{
    background: black;
  }

  .general{
    width: 100%;
    height: 100%;
  }

  header{
      width: 100%;
      height: 100%;
  }
  img{
      width: 100%;
      height: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstbox" class="general">
      <header><img src="https://cdn.pixabay.com/photo/2017/06/05/20/10/blue-2375119_960_720.jpg" alt="image here"></header>
  </div>
  <div id="second_box" class="general">

  </div>

  <div id="third_box" class="general">

  </div>

目前，该值不会增加/减少，而是不断重复。

如何操纵(增加/减少)每个滚动条上的 sum 值？

提前致谢

Answer 1

将 var sum = 0 移出触发函数。它在您的实现中的每个滚动上设置为零:

var sum = 0;

$(window).on('wheel', function(e) {

    var delta = e.originalEvent.deltaY;
    
    if (delta > 0){
        sum++;
        console.log("going down");
        console.log(sum);

    } else {
        if (sum > 0) {
          sum--;
        }
        console.log("going up");
        console.log(sum);
    }
    return true;
});

html,
  body{
    height: 100%;
  }
  #firstbox{
    background: red;
  }

  #second_box{
    background: blue;
  }

  #third_box{
    background: black;
  }

  .general{
    width: 100%;
    height: 100%;
  }

  header{
      width: 100%;
      height: 100%;
  }
  img{
      width: 100%;
      height: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="firstbox" class="general">
      <header><img src="https://cdn.pixabay.com/photo/2017/06/05/20/10/blue-2375119_960_720.jpg" alt="image here"></header>
  </div>
  <div id="second_box" class="general">

  </div>

  <div id="third_box" class="general">

  </div>