JSFiddle - React, Tailwind, and code Playground
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 + 'ronit ');
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...