Disable window scroll with jquery and when scroll detect if down animate body

Question

I do something interesting width JavaScript. I have page with sections and I disable window scroll with jQuery it works fine. and I also write some js to detect if user want to scroll and I take with parameter is it scrolled down or up. if down I scroll body. I write some js but it doesn’t work correctly. when scroll down it I need to call animation only one time and and when animation and and user scroll do it again but on time. in time that body animate scroll will disabled.also has some problem with lastscrollTop parametr it works bad. Sorry for my English and thank you for any help.

jsfiddle link http://jsfiddle.net/DHz77/277/

and js code.

$(document).ready(function(){
    $('body').on({
        'mousewheel': function(e) {
            e.preventDefault();
            e.stopPropagation();
        }
    });

    var lastscrollTop = 0;
    function mousewheel (e) {
            e = window.event || e;
            var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
            var windowHeight = $(window).height();
            var curscroll = $(window).scrollTop();

            if(delta > 0) {
                if($(window).scrollTop() == 0) {
                    return false;
                }else {
                    $("html,body").stop(true,true).animate({
                        scrollTop: lastscrollTop - windowHeight
                    });
                }
            }else {
                if($(window).scrollTop() == $(document).height() - $(window).height()) {
                    return false;
                }else {
                     $("html,body").stop(true,true).animate({
                        scrollTop: lastscrollTop + windowHeight
                    });
                }
            }

            lastscrollTop = curscroll;
        }

        var body = $("body").get(0);
        if (body.addEventListener) {
            body.addEventListener('mousewheel', mousewheel, false);
            body.addEventListener("DOMMouseScroll", mousewheel, false);
        } else {
            body.attachEvent("onmousewheel", mousewheel);
        }
});

Answer 1

I wouldn't count on reading the scrollTop() position because if you read it during the animation it will have some strange value, instead I'd keep track of the index of the current slide.

For the scrolling speed issue, I'd set a flag scrollAllowed and only fire the scroll event when it's true and then wait for a timeout to complete before you set it back to true.

An example will make you understand better what I mean: http://jsfiddle.net/DHz77/281/

var scrollIndex = 0; // the index of the current slide
var scrollTimeout = 500; //time between scrolls
var scrollAllowed = true; //at the beginning you can scroll
$(document).ready(function(){
    $('body').on({
        'mousewheel': function(e) {
            e.preventDefault();
            e.stopPropagation();
        }
    });

    var lastscrollTop = 0;
    function mousewheel (e) {
        if (scrollAllowed) { // only scroll when you're allowed
                scrollAllowed = false;
                e = window.event || e;
                var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
                var windowHeight = $(window).height();
                var curscroll = $(window).scrollTop();

                if(delta > 0) {
                    if($(window).scrollTop() == 0) {
                        return false;
                    }else {
                        scrollIndex++; //set the index to the one of the next slide
                        $("html,body").stop(true,true).animate({
                            scrollTop: -1 * scrollIndex * windowHeight //calculating the new scroll using the scrollIndex variable
                        });
                    }
                }else {
                    if($(window).scrollTop() == $(document).height() - $(window).height()) {
                        return false;
                    }else {
                        scrollIndex--; //set the index to that of the previous slide
                         $("html,body").stop(true,true).animate({
                            scrollTop: -1 * scrollIndex * windowHeight
                        });
                    }
                }

                lastscrollTop = curscroll;
            } else {
                return false; //if you're not allowed scrolling return false
            }

            var st = window.setTimeout(function() { //When you have scrolled, wait half a second before you're allowed to scroll again
                scrollAllowed = true;
            }, scrollTimeout)
        }

        var body = $("body").get(0);
        if (body.addEventListener) {
            body.addEventListener('mousewheel', mousewheel, false);
            body.addEventListener("DOMMouseScroll", mousewheel, false);
        } else {
            body.attachEvent("onmousewheel", mousewheel);
        }
});