Odd delta fluctuations with Chrome on Windows

[allisonzyancy]

I have a scrolljacking feature on the homepage of this site: http://mischiefsitereview.com/gpee

I had a lot of trouble normalizing the scroll events triggered by a trackpad vs a mouse wheel, but lethargy was exactly what I needed.

The only issue I'm having is that on Google Chrome on Windows, it doesn't seem to be recognizing when a mouse wheel is being turned. I have it console logging each time it recognizes the event. The threshold is 10. If you open the console on that site and watch as you scroll with a mouse wheel, it seems to randomly stagger the events.

Here's what I'm working with:

var $ = jQuery,
    delta = 0,
    currentSlideIndex = 0,
    scrollThreshold = 10,
    slides = $('.slide').toArray(),
    numSlides = slides.length,
    paginationItems = $('#pagination span').toArray(),
    homeTransitioned = false,
    lethargy = new Lethargy();

var animateHome = function() {
    $('#ed, #quest, #star, #big-star').addClass('transitioned');
    homeTransitioned = true;
}

var resetHome = function() {
    window.setTimeout(function() {
        $('#ed, #quest, #star, #big-star').removeClass('transitioned');
        homeTransitioned = false;
    }, 500);
}

function elementScroll (e) {
    // console.log(e.originalEvent);
    if (window.innerWidth >= 992) {
        // Prevent page from scrolling
        if (currentSlideIndex != numSlides || $(window).scrollTop() + 95 < $('#vignettes').offset().top) {
            e.preventDefault();
            e.stopPropagation();
        }

        if (currentSlideIndex === numSlides) {
            checkPaginationTop();
        }
            // --- Scrolling up ---
        // if (e.originalEvent.deltaY < 0 || e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {    
        if (lethargy.check(e) !== false) {

            if (lethargy.check(e) == 1) {
                if ($(window).scrollTop() + 95 <= $('#vignettes').offset().top) {
                    if ($('#wrap').hasClass('active') && $('.vignette:nth-of-type(1)').offset().top >= 95) {
                        $('#wrap').removeClass('active');
                        $('#pagination span.active').removeClass('active');
                        $('#pagination span[data-scroll="3"]').addClass('active');
                    }

                    delta--;

                    if ( Math.abs(delta) >= scrollThreshold && $('.vignette:nth-of-type(1)').offset().top >= 95) {
                        prevSlide();
                    }
                }
            }

            // --- Scrolling down ---
            else if (lethargy.check(e) == -1) {
                if (currentSlideIndex < numSlides) {
                    delta ++;
                    console.log(delta);

                    if (delta >= scrollThreshold && currentSlideIndex != 0) {
                        nextSlide();
                    } else if (delta >= scrollThreshold && currentSlideIndex === 0) {
                        delta = 0;
                        animateHome();
                        window.setTimeout(nextSlide, 700);
                    }
                } else if (currentSlideIndex === numSlides) {
                    if (!$('#wrap').hasClass('active')) {
                        $('#wrap').addClass('active');
                        nextSlide();
                    }
                }

            }

        }
    }
}

function checkPaginationTop() {
    // console.log($('#vignettes').offset().top, $('.vignette:nth-of-type(1)').offset().top);

    for (var i=1; i < 9; i++) {
        if ( $('.vignette:nth-of-type('+i+')').offset().top <= $('#vignettes').offset().top + (window.innerHeight/3)
                && $('.vignette:nth-of-type('+i+')').offset().top > $('#vignettes').offset().top) {
            $('#pagination span.active').removeClass('active');
            $(paginationItems[i + 3]).addClass('active');
        }
    }
}

function showSlide() {

    // reset
    delta = 0;

    $.each(slides, function(i, slide) {
        if (currentSlideIndex < numSlides) {
            $(slide).toggleClass('active', (i >= currentSlideIndex));
        }

    });

    if (currentSlideIndex === 0) {
        resetHome();
    }

}

function prevSlide() {

    currentSlideIndex--;

    if (currentSlideIndex < 0) {
        currentSlideIndex = 0;
    }

    $('#pagination span.active').toggleClass('active');
    $(paginationItems[currentSlideIndex]).toggleClass('active');

    showSlide();
}

function nextSlide() {
    currentSlideIndex++;

    if (currentSlideIndex > numSlides) { 
        currentSlideIndex = numSlides;
    }

    $('#pagination span.active').toggleClass('active');
    $(paginationItems[currentSlideIndex]).toggleClass('active');

    showSlide();
}

function skipToSlide(i) {

    var i = parseInt(i);
    console.log(currentSlideIndex, i);
    if ((currentSlideIndex < i || currentSlideIndex > i) && currentSlideIndex != numSlides) {
        currentSlideIndex = i + 1;
        prevSlide();
    } else if (currentSlideIndex === numSlides) {
        currentSlideIndex = i - 1;
        nextSlide();

    }
}

function keypress(e) {
    e = e || window.event;
    // console.log(e);

    if (e.keyCode == '38' && currentSlideIndex > 0 && currentSlideIndex != numSlides) {
        prevSlide();
    } else if (e.keyCode == '38' && currentSlideIndex === numSlides && $(window).scrollTop() + 95 <= $('#vignettes').offset().top) {
        if ($('#wrap').hasClass('active')) {
            $('#wrap').removeClass('active');
            prevSlide();
        } else {
            prevSlide();
        }
    } else if (e.keyCode == '40' && currentSlideIndex != numSlides - 1) {
        nextSlide();
    } else if (e.keyCode == '40' && currentSlideIndex === numSlides - 1) {

        if (!$('#wrap').hasClass('active')) {
            $('#wrap').addClass('active');
            nextSlide();
        }
    } else {
        return false;
    }
}

$(window).bind('mousewheel DOMMouseScroll wheel MozMousePixelScroll', elementScroll);
$(window).bind('keydown', keypress);

It's a little messy and complicated because only part of the page is scrolljacked. The important bit with lethargy is in the elementScroll function. Is this an issue you've seen before with lethargy?

[allisonzyancy]

I resolved this issue. Thanks