60fps fix plugin to disable hover state while scrolling by masking mouse cursor

60fpsfix.js

;(function($, window, document, undefined) {
    'use strict';
    var ns = 'fpsFix',
        methods = {};

    function _init(options) {

        if (!_allDependenciesAvailable()) {return false ;}

        var opts = $.extend(true, {}, $.fn[ns].defaults, options);

        return this.each(function() {

            var $that = $(this),
                o = $.extend(true, {}, opts, $that.data(opts.datasetKey));
                
            o = $.extend(true, o, {
                $that           : $that,
                trackMousePos   : false,
                timer           : null,
                clicked         : false,
                coverStyle      : undefined
            });

            $.data(this, ns, $.extend(true, o, {}));

            var coverCss = {
                'background-color': 'transparent',
                'z-index': 99999,
                'width': 150,
                'height': 150,
                'position': 'fixed',
                'top': 0,
                'left': 0,
                'transform': 'translate3d(0,0,0)',
                'pointer-events': 'none'
            }

            $('body').append('<div class="'+o.coverElemClass+'"></div>');
            o.coverStyle = $('.'+o.coverElemClass).css(coverCss);

            o.scrollContainer = $(o.scrollContainer);

            o.scrollContainer.on('click', function(event){
                if(event.target === o.cover && !event.synthetic) {
                    o.pos.x = event.clientX;
                    o.pos.y = event.clientY;
                    o.clicked = true;
                }
            });

            o.scrollContainer.on('scroll', function() {
                _handleScrollCover(o);
            });
        });
    }

    function _allDependenciesAvailable() {
        var err = [];
        if (err.length > 0) {
            alert(ns + ' jQuery plugin has missing lib(s): ' + err);
        }
        return err.length === 0;
    }

    function _handleScrollCover(o){
        clearTimeout(o.timer);
        if(!o.trackMousePos) {
            _mousePos(o);
            o.trackMousePos = true;
        }

        o.timer = setTimeout(function(){
            o.trackMousePos = false;
            o.coverStyle.css({
                'pointer-events': 'none'
            });
            if(o.clicked){
                _dispatchClick();
            }
            o.scrollContainer.off('mousemove', function(e){_updatePos(o,e)});
        },o.timeout);
    }

    function _updatePos(o, e) {
        event.stopPropagation()
        event.cancelBubble=true;

        var posX =  e.clientX-50 + 'px,'
        , posY =  e.clientY-50 + 'px,'
        , updatedPosCSS = 'translate3d('+posX+posY+'0)';

        o.coverStyle.css({
            transform : updatedPosCSS
        });
    }

    function _mousePos(o) {
        o.coverStyle.css('pointer-events', 'auto');
        o.scrollContainer.on('mousemove', function(e){_updatePos(o,e)});
    }

    function _dispatchClick(coords){
        var event = document.createEvent("MouseEvent"),
            elem = document.elementFromPoint(coords.x, coords.y);

        event.initMouseEvent(
            "click",
            true /* bubble */, 
            true /* cancelable */,
            window, null,
            coords.x, coords.y, 0, 0, /* coordinates */
            false, false, false, false, /* modifier keys */
            0 /*left*/, 
            null
        );
        event.synthetic = true;

        elem.dispatchEvent(event);
    }

    $.fn[ns] = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if ( typeof method === 'object' || !method) {
            return _init.apply(this, arguments);
        } else {
            $.error( 'jQuery.fn.' + ns + '.' +  method + '() does not exist.');
        }
    };

    /* default values for this plugin */
    $.fn[ns].defaults = {
        datasetKey      : ns.toLowerCase(), //always lowercase
        coverContainer  : 'body',
        scrollContainer : 'body',
        coverElemClass  : 'fps-cover-box',
        timeout         : 500
    };

})(jQuery, this, this.document);