jQuery mousewheel detect scroll up and down

Question

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

B.Friedrichs · Accepted Answer · 2017-07-23T13:54:13.247

2

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

edited Jul 23 '17 at 13:54

answered Jul 23 '17 at 13:32

B.Friedrichs

158
7

It changes from first to last slide in one scroll, when I do that. I want it to show only one slide when user scrolls... regardless of how long he scrolls – Manikiran Jul 23 '17 at 13:41
I don't think that is easily possible natively. Easiest would probably be to just include a flag with a timeout. Have a look at this possible solution: https://stackoverflow.com/a/14092859/1800184 – B.Friedrichs Jul 23 '17 at 13:46
It doesn't work as expected but somewhat works! Thanks :) – Manikiran Jul 23 '17 at 14:17

jQuery mousewheel detect scroll up and down

1 Answers1