OnMouseScroll increment a variable JS

Question

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

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 !

Possible duplicate of [Mousewheel event in modern browsers](http://stackoverflow.com/questions/14926366/mousewheel-event-in-modern-browsers) — Mike Scotty, Dec 20 '16 at 13:36

score 1 · Answer 1 · answered Dec 20 '16 at 14:48

1

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

answered Dec 20 '16 at 14:48

rajiv

64
1
6

That's look correct, but where did i put my line for return into my **class="number"** . And are you sure that will work if my height is equal to my window height ? So there is no scrollbar – AlexDemzz Dec 20 '16 at 15:07
If your height is equal to window height, there will be no scroll, so what is your intention? Or you can try position of y coordinates ie, how much mouse is gone up or down , something like that. – rajiv Dec 20 '16 at 18:00
Eg: element.style.top = y + "px"; – rajiv Dec 20 '16 at 18:01
i resolve my pb (in the post 2), you probably dont understand what i want, but anyway thank you for helping ! – AlexDemzz Dec 20 '16 at 20:03

score 0 · Accepted Answer · answered Dec 20 '16 at 16:58

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

OnMouseScroll increment a variable JS

2 Answers2