jquery - 有限的增量滚动（希望使用 jQuery）

Question

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

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

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

PS 抱歉标题模棱两可 - 有点难以知道我在问什么。

Answer 1

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

我的方法的一个缺点是它依赖于实际的可滚动元素。我已经为一个非常酷的插件添加了一个基本的事件处理程序，称为jQuery Mouse Wheel Plugin，它不依赖于元素的滚动。它实际上监听鼠标滚轮事件。不幸的是，我无法让它工作......所以我只是坚持使用我的方法来进行演示。

希望这会有所帮助，如果您有任何问题，请告诉我！

你可以在这里看到一个演示：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);
    });
});