OnMouseScroll 增加一个变量 JS答案

【问题标题】：OnMouseScroll increment a variable JSOnMouseScroll 增加一个变量 JS
【发布时间】：2016-12-20 13:27:42
【问题描述】：

我想做一个JS函数。

它会像这样工作：

如果我使用我的鼠标滚轮向下滚动，那么我的变量将减少。如果我使用我的鼠标滚轮向上滚动，我的变量将增加

我想把它放在一个条件中，并带有一个最大值和最小值。

我会把我网站的截图发给你，你会明白的

如您所见，我需要让它在没有滚动条的情况下工作。我只有一页100vh。

我做了一些非常糟糕的事情，但你会理解这个想法 https://jsfiddle.net/tuzycreo/

i= 1;
if (i>0 && i<5) { 

        //if(MouseScrollUp)
    //i++;
    document.querySelector('.number').innerHTML = i;

    //else if(MouseScrollDown)
    //i--;
    // document.querySelector('.number').innerHTML = number;

}

谢谢你们！

【问题讨论】：

Mousewheel event in modern browsers的可能重复

标签： javascript jquery html css

【解决方案1】：

你可以这样试试，

var scrollCount = 0, 
        latestScrollTop = 0,
        doc = document.documentElement,
        top = 0;

    // Bind window scroll event
    $(window).bind('scroll', function (e) {
        top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

        if (latestScrollTop < top) {
            // Scroll down, increment value
            scrollCount += 1;
        } else {
            // Scroll up, decrement value
            scrollCount -= 1;
        }

        // Store latest scroll position for next position calculation
        latestScrollTop = top;
    });

【讨论】：

这看起来是正确的，但是我在哪里把我的线路放在我的 class="number" 中。如果我的高度等于我的窗户高度，你确定这会起作用吗？所以没有滚动条
如果你的高度等于窗口高度，就不会有滚动，那么你的意图是什么？或者您可以尝试 y 坐标的位置，即鼠标向上或向下移动了多少，诸如此类。
例如：element.style.top = y + "px";
我解决了我的 pb（在帖子 2 中），您可能不明白我想要什么，但无论如何感谢您的帮助！

【解决方案2】：

我做了一些对我有用的东西

https://jsfiddle.net/u93c9eth/2/

var scrollCount = 1;
window.addEventListener('mousewheel', function(e){

  if(e.wheelDelta<0 && scrollCount<5){
    scrollCount++;
  }

  else if(e.wheelDelta>0 && scrollCount>1){
    scrollCount--;
  }
  document.querySelector('.number').innerHTML = scrollCount;
});

【讨论】：