2

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 !

1

2 Answers 2

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;
    });
4
  • 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, 2016 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, 2016 at 18:00
  • Eg: element.style.top = y + "px";
    – rajiv
    Dec 20, 2016 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, 2016 at 20:03
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.