CODEWITHSUNDEEP
javascriptjqueryhtml
Manikiran
Manikiran

Reputation: 1

jQuery mousewheel detect scroll up and down

I have a few sections (each of size 100% x 100% - Fullscreen), which are fixed and overlapped on top of one another using z-index. I want to detect the mouse scroll and display respective sections using jQuery (Basically, something like fullpage.js but I will have different animations). I read many questions and tried the following code, but doesn't work.

Javascript:

$(document).ready(function(){
    sections=["intro","features","gallery","contact"]
    cs=0;
    $(window).on('mousewheel DOMMouseScroll', function(e){
        if(e.originalEvent.detail > 0) {
            //scroll down - Show next section
            if(cs < (sections.length-1)){
                $("#"+sections[cs]).fadeOut();
                cs+=1;
                $("#"+sections[cs]).fadeIn();
            }
        }
        else{
            //scroll up - Show previous section
            if(cs > 0){
                $("#"+sections[cs]).fadeOut();
                cs-=1;
                $("#"+sections[cs]).fadeIn();
            }
        }
        return false;
    });
});

HTML:

<section id="intro">
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>
<section id="features">
    <div class="content">
        <h1>Features</h1>
    </div>
</section>
<section id="gallery">
    <div class="content">
        <h1>Gallery</h1>
    </div>
</section>
<section id="contact">
    <div class="content">
        <h1>Contact Us</h1>
    </div>
</section>

To see the whole code, in case you need it, visit github

Upvotes: 1

Views: 2264

Answers (1)

B.Friedrichs
B.Friedrichs

Reputation: 158

So I checked the behaviour in a jsfiddle https://jsfiddle.net/oobmky4n/ and basically your problem seems to be that 

e.originalEvent.detail

is always 0 and instead you want to use

e.originalEvent.deltaY

I only tested it in safari for now but it seems to work. Also seems to be reflected by https://developer.mozilla.org/en-US/docs/Web/Events/wheel

Addition to stop during a continuous scroll:

A possible solution is a flag with a timeout. I updated my original here: https://jsfiddle.net/oobmky4n/2/ As you can see we set isScrolling once a successful scroll happened. After 250ms of not scrolling while the flag is set we revert back to a non-scrolling state.

 if(isScrolling) {
    clearTimeout(resetScroll)
    resetScroll = setTimeout(function() {
        isScrolling = false
    }, 250);
  }

Upvotes: 2

Related Questions