Question

我希望限制一个人可以一次滚动的金额，以便他们按顺序在网站上过滤幻灯片。

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

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

P.S。对于含糊不清的标题感到抱歉 - 有点难以知道我在问什么。

Answer 1

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

我的方法的一个缺点是它依赖于存在一个实际的可滚动元素。我为一个名为jQuery Mouse Wheel Plugin的非常酷的插件包含了一个基本的事件处理程序，它不依赖于元素的滚动。它实际上听了mousewheel事件。不幸的是，我无法让它工作......所以我只是坚持使用我的方法进行演示。

希望这会有所帮助，如果您有任何问题，请与我联系！

您可以在此处查看演示：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);
    });
});

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

1 个答案: