OnMouseScroll增加一个变量JS

Question

我想制作一个JS函数。

它会像这样工作：

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

我想将其置于条件中，最大值和最小值。

我会向您发送我的网站截图，您将理解

就像你看到的那样，我需要让它在没有滚动条的情况下工作。我只有一页在100vh 。

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

const getEdges = () =>
  [
    {labels: ['label2', 'label1']},
    {labels: ['label1', 'label2']}
  ];
const getLabels = edge => edge.labels;

const edges = [];
getEdges().forEach(edge => {
  getLabels(edge).sort().forEach(label => {
    edges.push(`${(edges.length + 1)}-${label}`);
  });
});
console.log(edges);

谢谢你们！

Answer 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;
    });

Answer 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;
});