Detect scroll in 100% height fixed div

Question

I have a 100% height x 100% width fixed main container on my website, in which I would like to detect the scroll event. The page structure could be described as a slider with fixed active slide and non-active slides being positioned absolutely below the main container. I got it working perfectly when I have a pager on the side. The thing is, I would also like user to be able to switch between slides using only mouse scroll (go to next slide on scroll down, and drop the slide down revealing the previous one, while scrolling up). Is there any way I can do it, keeping my page structure as is? The fiddle can be found here: http://jsfiddle.net/tts4nhun/1/ (it's just a quick recreation and I think a few things are unnecessary in css, but they don't really change anything when it comes to the content of this question).

HTML:

<div class="wrapper">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
</div>

CSS:

.wrapper {
    position:absolute;
    background:red;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow:hidden;
}

.slide {
    width:100%;
    height:100%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.slide-1 {
    position:fixed;
    top:0;
    left:0;
    background:blue;
} 

.slide-2 {
    position:absolute;
    top:100%;
    left:0;
    background:green;
}

.slide-2.active { 
    position:fixed;
    top:0;
    left:0;
} 

jQuery :

$('.slide-1').click(function(){
    $('.slide-2').addClass('active');
});

I'm not asking about checking if the user scrolled down or up, but if they did at all.

I'll be very grateful for any advice. Thanks, E.

e: To clarify, I want the scrolling itself to be disabled (user shouldn't be able to scroll down the website in a traditional way). The reason I want to detect the scroll event is, I want to swap active classes on a single scroll down or up. (That is also the reason why I want to keep the overflow:hidden property - I want the website to resemble a slideshow and use the scroll up/scroll down events just like up/down arrows).

Answer 1

For Chrome and Firefox:

$(window).on('mousewheel DOMMouseScroll', function(e){
    if(e.originalEvent.detail > 0) {
        //scroll down
        $('.slide-1').removeClass('active');
        $('.slide-2').addClass('active');
    }else {
        //scroll up
        $('.slide-1').addClass('active');
        $('.slide-2').removeClass('active');
    }
    //prevent page fom scrolling
    return false;
});

I'm not certain but Jason is right the mousewheel event is also something to watch out for. I think you will run into problems with these solutions on IE though.

If you only have two slides (and the direction of the scroll doesn't matter), you could also consider something like:

$(window).on('mousewheel DOMMouseScroll', function(e){
    $('.slide').toggleClass('active');
    //prevent page fom scrolling
    return false;
});

Update: Okay I was bored so now I've made this (maybe I should say that I made my own assumptions about what this effect needed to look like so sliding is not necessarily ideal but I like that it toggles):

$(".slide-1").slideDown();
$(window).on('DOMMouseScroll mousewheel', function(event) {
  $(".slide-1").slideToggle();
  $(".slide-2").slideToggle();
});

.wrapper {
  position: absolute;
  background: red;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.slide-1 {
  background: blue;
}
.slide-2 {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="slide slide-1"></div>
  <div class="slide slide-2"></div>
</div>

Answer 2

http://jsfiddle.net/tts4nhun/8/

This works in IE9 and Chrome. I don't have firefox. Let me know.

    $(window).on('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        $(".slide-2").removeClass("active");
        $(".slide-2").animate({top: "100%"},500,"linear");
    }
    else {
        $(".slide-2").addClass("active");
        $(".slide-2").animate({top: "0"},500,"linear");
    }
});

Answer 3

You could try the following:

$(".wrapper").on('mousewheel DOMMouseScroll', function (event) {
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        $('.slide-2').addClass('active');
    } else {
        $('.slide-2').addClass('active');
    }
});

See fiddle: http://jsfiddle.net/audetwebdesign/682opyoz/

There may be some cross browser issues and you will need to make sure that the user can get back to slide-1.

Reference: Get mouse wheel events in jQuery?

Note:

If you have more than two slides, this approach could get complicated.

As far as detecting the mouse wheel event, you might need to write you own listener as discussed at:

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

You need to make sure that you can detect scroll-up/down in a cross-browser robust way.

You then need to know which slide you are on and show the next one up/down as required.

Answer 4

Seems like the plugin below solved all the problems I had with making it work across all the browsers.

http://www.ogonek.net/mousewheel/jquery-demo.html

Answer 5

or you can simply use vanilla JavaScript Like this:

window.addEventListener('wheel', function(e) {
    direction = e.deltaY

    if (direction > 0) {
        console.log('scrolling up')
    }else{
        console.log('scrolling down')
    }
})