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>

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

我如何操纵（增加/减少）每个滚动上的总和值？

预先感谢

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>

Answer 2

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 {
            sum--;
            console.log("going up");
            console.log(sum);
        }
        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>

全局声明和的值将通过以下链接https://www.geeksforgeeks.org/understanding-variable-scopes-in-javascript/

解决更多与范围相关的问题

如何在每次滚动运动中操纵一个值？

2 个答案: