Question

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

jsfiddle link 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时触发滚动事件，然后在设置之前等待超时完成它回归真实。

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

使用jquery禁用窗口滚动，并在滚动检测时关闭动画主体

1 个答案: