JSFiddle - React, Tailwind, and code Playground

by SimoneGianni

HTML

<html>
    <head>
        <script src="../src/jquery-1.4.2.js"></script>
        <script src="../src/jquery.wheel.js"></script>
        <style>
            #fps {
                width: 100%;
                height: 100px;
                font-size: 40px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="fps">
            0
        </div>
        <div id="sum">
            0
        </div>
        <script>
        $(function() {
            var fpsout = $('#fps');
            var last = 0;
            var sum = 0;
            var sumtimer = null;
            fpsout.bind('mousewheel', function(event, delta) {
                var now = new Date().getTime();
                var elap = now - last;
                last = now;
                startSum();
                sum += Math.abs(delta);
                fpsout.text(delta + ' ' + elap);
                event.preventDefault();
                return false;
            });
            function startSum() {
                if (sumtimer) clearInterval(sumtimer);
                sumtimer = setTimeout(checksum,500);
            }
            function checksum() {
                $('#sum').text(sum + ' ');
                sumtimer = null;
                sum = 0;
            }
        });
        </script>
    </body>
</html>

JavaScript

/*
JQuery Mousewheel plugin modified by Simone Gianni <[email protected]>
to implement the same adaptive behavior found on 
Qooxdoo on their mousewheel event :

https://github.com/qooxdoo/qooxdoo/blob/master/qooxdoo/framework/source/class/qx/event/type/MouseWheel.js


*/

/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
 * Licensed under the MIT License (LICENSE.txt).
 *
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 * Thanks to: Seamus Leahy for adding deltaX and deltaY
 *
 * Version: 3.0.4
 * 
 * Requires: 1.2.2+
 */

(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener ) {
            for ( var i=types.length; i; ) {
                this.addEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = handler;
        }
    },
    
    teardown: function() {
        if ( this.removeEventListener ) {
            for ( var i=types.length; i; ) {
                this.removeEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = null;
        }
    }
};

$.fn.extend({
    mousewheel: function(fn) {
        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },
    
    unmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});

var stats = {
    max : null,
    min : null,
    factor: 1
};

function normalize(delta) {
    var absDelta = Math.abs(delta);

    // store the min value
    if (stats.min == null || stats.min > absDelta) {
      stats.min = absDelta;
      recalculateMultiplicator();
    }

    // store the max value
    if (stats.max == null || stats.max < absDelta) {
      stats.max = absDelta;
      recalculateMultiplicator();
    }

    // special case for systems not speeding up
    if...