Question

我在单页网站上使用此脚本：

$(document).ready(function () {
    var divs = $('.mydiv');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

但我无法弄清楚如何阻止另一个滚动，直到已经滚动的滚动完成，然后在下一次滚动之前做一个lillte延迟。

如果您尝试在小提琴中进行大量滚动动作，则只需滚动停止每个mydiv。

jsFiddle

有人可以帮帮我吗？

Answer 1

这是一个可能的解决方案：

我添加了一个变量来确定您的脚本是否正在运行：

var running = false;

在函数开头使用超时切换此变量：

$(document.body).on('DOMMouseScroll mousewheel', function (e) {
    if (running) {
        return false;
    }

    running = true;
    setTimeout(function() {
        running = false;
    }, 1000);

    […]

<强>演示

Try before buy

Answer 2

添加“滚动”布尔标志并检查它是否已设置。要获得延迟，请在一段时间后重置标志。

请参阅http://jsfiddle.net/JqU2T/34/

代码示例：

var scrolling = false;

$(document.body).on('DOMMouseScroll mousewheel', function (e) {
    if(scrolling) return false;
    scrolling = true;

    // your codes here...

    setTimeout(function() {
        scrolling = false;
    }, 5000); // delay of 5000ms

    return false;
});

当页面已经存在时，防止另一个鼠标滚动

2 个答案: