JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<h2>When scrolling is forced, red outline will appear. This is just for testing purposes.. and a visual aid.</h2>

<div class="parent">
    <div class="child">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

<div class="parent">
    <div class="child">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet tincidunt lectus, at ullamcorper arcu fringilla sit amet. Etiam sagittis, diam mattis tempus consectetur, ligula sem adipiscing purus, sit amet facilisis nisi dui egestas elit. Aliquam iaculis bibendum ligula in interdum. Maecenas nec dolor consectetur libero posuere eleifend in sit amet nunc. Nunc scelerisque sodales aliquet. Maecenas quis ipsum mauris. Nulla scelerisque elementum tellus, vel consectetur magna euismod vel. Mauris ac diam velit, at euismod arcu. Nulla et velit id augue blandit suscipit. Vivamus augue odio, consequat sed tincidunt eget, posuere et velit. Nullam eu nunc id est scelerisque consequat.

Aliquam sollicitudin interdum orci at aliquet. Donec suscipit arcu justo, malesuada vulputate mi. Morbi sed tempor massa. Mauris quis risus odio. Morbi venenatis neque a mauris fermentum blandit consequat ipsum vehicula. Maecenas quis erat adipiscing arcu tincidunt pellentesque nec et leo. Nullam quis sapien eu justo malesuada dignissim. Vivamus leo metus, sollicitudin et malesuada ut, sagittis eget tellus. Curabitur ac purus ligula. Proin imperdiet mi non massa convallis sagittis. In turpis arcu, adipiscing et congue sed, venenatis nec nunc. In lobortis mollis dui. Pellentesque euismod lectus malesuada risus convallis faucibus. Fusce odio turpis, adipiscing non vehicula at, accumsan in tortor. Sed augue nunc, porttitor eget gravida sit amet, dictum vestibulum turpis. Donec et leo est. 
    </div>
</div>

CSS

h2 { font-size: 20px; }

.parent {
    border: 1px solid #e1e1e1;
    margin: 20px;
    width: 200px;
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    float: left;
}

.child { display: none; }

.forceScrolling { outline: 2px solid red; }

JavaScript

/*
* touchSwipe - jQuery Plugin
* https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
* http://labs.skinkers.com/touchSwipe/
* http://plugins.jquery.com/project/touchSwipe
*
* Copyright (c) 2010 Matt Bryson (www.skinkers.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* $version: 1.5.1
*
* Changelog
* $Date: 2010-12-12 (Wed, 12 Dec 2010) $
* $version: 1.0.0
* $version: 1.0.1 - removed multibyte comments
*
* $Date: 2011-21-02 (Mon, 21 Feb 2011) $
* $version: 1.1.0     - added allowPageScroll property to allow swiping and scrolling of page
*                    - changed handler signatures so one handler can be used for multiple events
* $Date: 2011-23-02 (Wed, 23 Feb 2011) $
* $version: 1.2.0     - added click handler. This is fired if the user simply clicks and does not swipe. The event object and click target are passed to handler.
*                    - If you use the http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ plugin, you can also assign jQuery mouse events to children of a touchSwipe object.
* $version: 1.2.1     - removed console log!
*
* $version: 1.2.2     - Fixed bug where scope was not preserved in callback methods.
*
* $Date: 2011-28-04 (Thurs, 28 April 2011) $
* $version: 1.2.4     - Changed licence terms to be MIT or GPL inline with jQuery. Added check for support of touch events to stop non compatible browsers erroring.
*
* $Date: 2011-27-09 (Tues, 27 September 2011) $
* $version: 1.2.5     - Added support for testing swipes with mouse on desktop browser (thanks to https://github.com/joelhy)
*
* $Date: 2012-14-05 (Mon, 14 May 2012) $
* $version: 1.2.6     - Added timeThreshold between start and end touch, so user can ignore slow swipes (thanks to Mark Chase). Default is null, all swipes are detected
*
* $Date: 2012-05-06 (Tues, 05 June 2012) $
* $version: 1.2.7     - Changed time threshold to have null default for backwards compatibility. Added duration param passed back in events, and refactored how time is handled.
*
*...