Performant Handling of Scroll Events

performance-scroll-handling.js

var lastScrollY     = 0;
var ticking         = false;
var windowMiddle    = $(window).height()/2;

var scrollCallback = function scrollCallback(e) {

    var elementClosestToMiddle = _this.findElementClosestToMiddle(elements, {
        windowMiddle: windowMiddle
    });


    // Update state
    if (elementClosestToMiddle) {
        store.setActiveElement( elementClosestToMiddle );
    }

    // allow further rAFs to be called
    ticking = false;
};


var requestTick = function() {
    if(!ticking) {
        requestAnimationFrame(scrollCallback);
        ticking = true;
    }
}

$(window).on('scroll', function(e) {
    lastScrollY = window.scrollY; // avoid "work" here
    requestTick(); // defer work to rAF
});