JSFiddle - React, Tailwind, and code Playground

by CroaToa

HTML

<html>
    <head>
        <meta charset="utf-8">      
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.js"></script>

    </head>
    <body>
        <script type="text/javascript">
            // Relevant code
            var lastAnimation = 0;
            var animationTime = 1000; // in ms
            var quietPeriod = 500; // in ms, time after animation to ignore mousescroll

            function scrollThis(event, delta, deltaX, deltaY) {
                var timeNow = new Date().getTime();

                // change this to deltaX/deltaY depending on which
                // scrolling dir you want to capture
                deltaOfInterest = deltaY;

                if (deltaOfInterest == 0) {
                    // Uncomment if you want to use deltaX
                    // event.preventDefault();
                    return;
                }

                // Cancel scroll if currently animating or within quiet period
                if(timeNow - lastAnimation < quietPeriod + animationTime) {
                    event.preventDefault();
                    return;
                }

                if (deltaOfInterest < 0) {
                    if ($('.active').nextAll('.scrollableBlock:first').length) {
                        lastAnimation = timeNow;
                        $('.active').removeClass('active').nextAll('.scrollableBlock:first').addClass('active');
                        $('html,body').animate( {
                            scrollTop: $('.active').offset().top }, animationTime);
                    }
                } else {
                    if ($('.active').prevAll('.scrollableBlock:first').length) {
                        lastAnimation = timeNow;
                        $('.active').removeClass('active').prevAll('.scrollableBlock:first').addClass('active');
       ...