JSFiddle - React, Tailwind, and code Playground

by btevfik

HTML

<div>Try scrolling the iframe. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut bibendum eros. Vestibulum ut lectus velit, a hendrerit sem. Nulla tristique congue quam, ut facilisis diam vulputate sit amet. Fusce adipiscing convallis vestibulum. Etiam quis massa id diam molestie commodo auctor sed arcu. Fusce scelerisque iaculis massa, vel consectetur quam adipiscing non. Cras posuere gravida sapien vitae placerat. Nulla molestie congue sodales. In vehicula rutrum varius. Nulla tempus, urna non sagittis dictum, lacus arcu iaculis velit, vitae rutrum augue nisi scelerisque sapien. Pellentesque neque lectus, vestibulum sed dapibus in, pellentesque a leo. Nullam feugiat odio eu orci ornare quis sodales dui mollis. Proin viverra consequat metus, et euismod elit pulvinar sodales. Proin et lectus sit amet urna pharetra tempor sit amet nec arcu. Sed arcu tortor, dictum nec congue id, consectetur a quam. Vivamus fermentum tellus lectus, ac blandit velit. Curabitur non massa quam, a ultrices ligula. Etiam et neque vitae elit vulputate volutpat nec nec lacus. Pellentesque gravida molestie enim at placerat. Etiam at lacus id sem bibendum aliquam. Vivamus sed nunc id ante gravida pulvinar ut vitae orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat erat non nibh porta sed porttitor neque iaculis. Fusce in imperdiet neque. Integer tincidunt mi sed dolor varius interdum. Curabitur a pellentesque nibh. Praesent nec nunc felis. Cras porta eros vitae sapien auctor ut consequat risus aliquam. Mauris orci orci, volutpat sit amet facilisis vel, feugiat a augue. Ut ultrices ante sit amet felis vulputate mattis. Donec interdum massa a leo tempus sed pellentesque neque rutrum. Duis porta urna a leo accumsan viverra. Donec ut mi et tellus gravida consequat. Etiam eu eros augue, in sodales nisi. Ut vel tortor sit amet massa tempus imperdiet ut ut odio. Donec accumsan porttitor quam, nec venenatis felis vulputate a. Nulla consequat sem ligula,...

JavaScript

(function () {

    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.scrollstart = {
        setup: function () {

            var timer,
            handler = function (evt) {

                var _self = this,
                    _args = arguments;

                if (timer) {
                    clearTimeout(timer);
                } else {
                    evt.type = 'scrollstart';
                    jQuery.event.handle.apply(_self, _args);
                }

                timer = setTimeout(function () {
                    timer = null;
                }, special.scrollstop.latency);

            };

            jQuery(this).bind('scroll', handler).data(uid1, handler);

        },
        teardown: function () {
            jQuery(this).unbind('scroll', jQuery(this).data(uid1));
        }
    };

    special.scrollstop = {
        latency: 300,
        setup: function () {

            var timer,
            handler = function (evt) {

                var _self = this,
                    _args = arguments;

                if (timer) {
                    clearTimeout(timer);
                }

                timer = setTimeout(function () {

                    timer = null;
                    evt.type = 'scrollstop';
                    jQuery.event.handle.apply(_self, _args);

                }, special.scrollstop.latency);

            };

            jQuery(this).bind('scroll', handler).data(uid2, handler);

        },
        teardown: function () {
            jQuery(this).unbind('scroll', jQuery(this).data(uid2));
        }
    };

})();

var lastScrollTop = 0;

jQuery(window).bind('scrollstart', function () {
        var st = $(this).scrollTop();
        if (st > lastScrollTop) {
            window.scrollBy(0, 500);
        } else {
            window.scrollBy(0, -500);
        }
        lastScrollTop = st;
});