JSFiddle - React, Tailwind, and code Playground

by webxl

HTML

<div id="scroll">
    <h1>Scroll Once</h1>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia pretium velit ut condimentum. Nam convallis ultrices congue. Etiam dictum est vel nunc pellentesque facilisis. Aenean fringilla risus feugiat magna ullamcorper hendrerit. Praesent leo felis, pellentesque ut auctor id, scelerisque sed neque. Maecenas facilisis auctor felis ac accumsan. Quisque ornare ante eget ipsum sagittis luctus. Suspendisse in aliquam libero. Cras sit amet est ligula, eget gravida lectus. Ut enim eros, suscipit ut volutpat id, tincidunt non ipsum. Cras nisi ante, ornare nec interdum vel, aliquet non eros. Nam fringilla bibendum mauris, suscipit semper arcu porta vel. Aenean vestibulum molestie sem nec tempus. Donec sit amet lacus turpis. Praesent porta felis urna. Suspendisse potenti.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia pretium velit ut condimentum. Nam convallis ultrices congue. Etiam dictum est vel nunc pellentesque facilisis. Aenean fringilla risus feugiat magna ullamcorper hendrerit. Praesent leo felis, pellentesque ut auctor id, scelerisque sed neque. Maecenas facilisis auctor felis ac accumsan. Quisque ornare ante eget ipsum sagittis luctus. Suspendisse in aliquam libero. Cras sit amet est ligula, eget gravida lectus. Ut enim eros, suscipit ut volutpat id, tincidunt non ipsum. Cras nisi ante, ornare nec interdum vel, aliquet non eros. Nam fringilla bibendum mauris, suscipit semper arcu porta vel. Aenean vestibulum molestie sem nec tempus. Donec sit amet lacus turpis. Praesent porta felis urna. Suspendisse potenti.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia pretium velit ut condimentum. Nam convallis ultrices congue. Etiam dictum est vel nunc pellentesque facilisis. Aenean fringilla risus feugiat magna ullamcorper hendrerit. Praesent leo felis, pellentesque ut auctor id, scelerisque sed neque. Maecenas facilisis auctor felis ac...

CSS

h1
{
    text-align: center;
    font-size: 30px;
}

#amount
{
    font-size: 30px;
    text-align: left;
    
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#scroll
{
    overflow: auto;
    margin: 20px;
    border: 1px solid #ddd;
    width: 250px;
    height: 300px;
    text-align: justify;
    
    margin-left: auto;
    margin-right: auto;
}

JavaScript

var previous = $('#scroll').scrollTop();
var tDelta = 0;
var epsilon = 50;
var epsilon2 = 1000;
var max = 0;
var mousemax = 0;

var delta = 0;

$('#scroll').scroll(function() {
    $('#amount p:eq(0) span:eq(0)').html($(this).scrollTop());
}).bind('mousewheel', function(e) {
    
    
    if ( e.wheelDelta ) {
        delta = e.wheelDelta; // / 120;    
    }
    
    // Firefox doesn't implement wheelDelta
    if ( e.detail ) {
        delta = -e.detail / 3;    
    }
    
    
    mousemax = Math.abs(delta) > mousemax ? Math.abs(delta) : mousemax;
});

function pollDistance() {
    current = $('#scroll').scrollTop();
    tDelta = current - previous;
    $('#amount p:eq(1) span:eq(0)').html(tDelta);
    previous = current;

    max = Math.abs(tDelta) > max ? Math.abs(tDelta) : max;
    
    $('#amount p:eq(3) span:eq(0)').html(delta);
}

function getMaxDelta() {
    $('#amount p:eq(2) span:eq(0)').html(max);
    $('#amount p:eq(4) span:eq(0)').html(mousemax);
    max = 0;
    mousemax = 0;
}

setInterval(pollDistance, epsilon);
setInterval(getMaxDelta, epsilon2);