JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="box one">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam id, minima mollitia error rerum aut illo ab beatae, voluptatum quas repudiandae velit dignissimos veniam, atque necessitatibus fugit distinctio. Exercitationem, perspiciatis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam id, minima mollitia error rerum aut illo ab beatae, voluptatum quas repudiandae velit dignissimos veniam, atque necessitatibus fugit distinctio. Exercitationem, perspiciatis!</p>
</div>
<div class="box two">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam id, minima mollitia error rerum aut illo ab beatae, voluptatum quas repudiandae velit dignissimos veniam, atque necessitatibus fugit distinctio. Exercitationem, perspiciatis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam id, minima mollitia error rerum aut illo ab beatae, voluptatum quas repudiandae velit dignissimos veniam, atque necessitatibus fugit distinctio. Exercitationem, perspiciatis!</p>
</div>

CSS

.box {
  width: 200px;
  height: 200px;
  overflow: auto;
  display: inline-block;
  margin: 20px;
}

.box.one {
  overflow: hidden;
}

JavaScript

/**
     * Initializes a new instance of the EventCoordinator
     * @constructor
     */
    var EventCoordinator = function (context) {
        this.context = context;
        this.registeredEventListeners = [];
    };

    /**
     * Registers an event listener on the target DOM element
     * 
     * @param {HTMLDOMElement} target the target DOM element
     * @param {string} type the event type
     * @param {function} listener the event listener
     * @param {boolean} useCapture true if we should use the event capture phase, otherwise false (bubble phase)
     * @param {string} name for the event listener, to be used to reference it later
     */
    EventCoordinator.prototype.register = function (target, type, listener, useCapture, name) {
        var listenerDefinition = {
            target: target,
            type: type,
            listener: listener.bind(this.context),
            useCapture: useCapture,
            name: name
        };
        this.registeredEventListeners.push(listenerDefinition);
        listenerDefinition.target.addEventListener(listenerDefinition.type, listenerDefinition.listener, listenerDefinition.useCapture);
    };

    /**
     * Unregisters a specific named event listener
     * 
     * @param {string} name of the event listener to detatch
     */
    EventCoordinator.prototype.unregister = function (name) {
        var listenerIndextoRemove = -1;
        this.registeredEventListeners.forEach(function (item, index) {
            if (item.name === name) {
                listenerIndextoRemove = index;
            }
        });

        if (listenerIndextoRemove > -1) {
            var listenerDefinition = this.registeredEventListeners.splice(listenerIndextoRemove, 1)[0];

            listenerDefinition.target.removeEventListener(listenerDefinition.type, listenerDefinition.listener, listenerDefinition.useCapture);
            listenerDefinition.target = null;
        }
    }

    /**
     * Raises a fake event against the...