使用 jquery 禁用窗口滚动，并在滚动时检测是否向下动画主体

Question

我做了一些有趣的宽度 JavaScript。我有带有部分的页面，并且我使用 jQuery 禁用了窗口滚动，它工作正常。我还写了一些js来检测用户是否想要滚动，我用参数是向下滚动还是向上滚动。如果向下滚动身体。我写了一些js，但它不能正常工作。当向下滚动它时，我只需要调用一次动画，当动画和用户滚动时，它会按时再次执行。随着时间的推移，身体动画滚动将被禁用。lastscrollTop 参数也有一些问题，它工作得不好。对不起我的英语，谢谢你的帮助。

jsfiddle链接http://jsfiddle.net/DHz77/277/

还有js代码。

$(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

我不会指望读取 scrollTop() 位置，因为如果您在动画期间读取它，它会有一些奇怪的值，相反我会跟踪当前幻灯片的索引。

对于滚动速度问题，我设置了一个标志 scrollAllowed 并且仅在它为 true 时触发滚动事件，然后等待超时完成，然后再将其设置回 true。

一个例子会让你更好地理解我的意思：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);
        }
});