有限的增量滚动(希望使用jQuery)

Question

我想限制一个人可以在一次滚动的数量，以便他们通过幻灯片在一个网站上的顺序过渡。

下面是一个例子：http://www.apple.com/mac-pro/

无论您滚动多少，您都会一次转换到下一个/prev幻灯片(除非您选择了一个幻灯片，在这种情况下，您将直接转换到它)。希望我可以通过截取用户滚动时截取来相对轻松地使用jQuery。

抱歉，标题模棱两可-很难知道我在问什么。

Answer 1

下面是一个小示例，说明如何编写了解用户滚动状态的实际机制。打开浏览器控制台，在鼠标上下移动时查看日志。我还为幻灯片之间的动画添加了一个事件暂停。

这里我的方法的一个缺点是它依赖于一个实际的可滚动元素。我已经为一个非常酷的插件jQuery鼠标轮插件提供了一个基本的事件处理程序，它不依赖于元素的滚动。它实际上是在听鼠标轮事件。不幸的是我没能让它起作用..。因此，为了演示的目的，我坚持使用我的方法。

希望这能帮上忙，如果你有什么问题，请告诉我！

您可以在这里看到一个演示：http://jsfiddle.net/YF4HY/

$(function () {
    var scroll      = 0, //how many times have we scrolled
        scroll_max  = 15, //how many times we want to scroll per slide
        prev_scroll = 0, //what was the last scrollTop? We need this to know up from down
        slide       = 0, //this can be whatever you want, but this just tracks the current slide
        slide_max   = 5, //how many slides we have
        animated    = false; //are we animating? if so, we want to cancel the scroll handler

    function scrollUp () {
        if(scroll === 0 && slide < 1){
          console.log('beginning of slides');
        } else if (scroll > 0) {
            scroll--;
        } else if (scroll === 0 && slide > 0) {
            simulateAnimation(slideBackward);//CHANGE SLIDES AND CANCEL THE SCROLL EVENT

        }
    }

    function scrollDown () {
        if(scroll === scroll_max && slide === slide_max){
          console.log('top of slides');
        } else if (scroll < scroll_max) { //normal scroll up
            scroll++;
        } else if (scroll === scroll_max && slide < slide_max) {
            simulateAnimation(slideForward);//CHANGE SLIDES AND CANCEL THE SCROLL EVENT  
        }
    }

    function slideForward () {
        scroll = 0;
        slide++;
        animated = false;
    }


    function slideBackward () {
        scroll = scroll_max;
        slide--;
        animated = false;
    }

    //figured out which direction we scrolled
    function determineScrollDirection (current_scroll) {
        var prev = prev_scroll;
        prev_scroll = current_scroll;
        return (current_scroll > prev) ? 'down' : 'up';
    }

    function simulateAnimation (handler) {
        animated = true;
        setTimeout(handler, 2000);
    }

    $(window).on('scroll', function (e) {
        if(!animated){
            switch (determineScrollDirection($(this).scrollTop())) {
                case 'down':
                    scrollDown();
                    break;
                case 'up':
                    scrollUp();
                    break;
            }
            console.log({slide:slide, scroll:scroll});
        } else {
          console.log('Don\'t do anything because we are changing slides.');
        }
    });

    // YOU MIGHT BE ABLE TO USE THIS TO LISTEN TO MOUSEWHEEL EVENTS ACCURATELY WITH NO SCROLL
    // https://github.com/brandonaaron/jquery-mousewheel/
    $(document).on('mousewheel', function(event, delta, deltaX, deltaY) {
        //console.log(delta, deltaX, deltaY);
    });
});