CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AlexDemzz
AlexDemzz

Reputation: 243

OnMouseScroll increment a variable JS

I want to make a JS function.

It will work like this :

If I use my Mouse Wheel to Scroll Down so my variable will decrement. And if I use my Mouse Wheel to Scroll Up my variable will increment

I want to put that in a Condition with a max and min number.

I will send you a screenshot of my website and you will understand

enter image description here

So like you see, I need to make it work without scrollbar. I've only one page in 100vh.

I've make something very bad but you will understand the idea 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;

}

Thanks you guys !

Upvotes: 2

Views: 2079

Answers (2)

AlexDemzz
AlexDemzz

Reputation: 243

I make something that is working for me

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

Upvotes: 0

rajiv
rajiv

Reputation: 74

You can try like this, 

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

Upvotes: 1

Related Questions