JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<script src="http://joonas.me/_misc/touchswipe.js"></script>
<div class="parent">
    <strong>No scrollbar</strong>
    <div class="child">
        Lorem ipsum dolor sit amet.
    </div>
</div>



<div class="parent">
    <strong>Vertical scrollbar</strong>
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eros dolor, varius sagittis commodo vitae, aliquet non augue. Donec ligula urna, gravida vitae laoreet eu, commodo non elit. Aliquam viverra placerat sollicitudin. Proin vitae eros sit amet nibh ullamcorper porta nec in dui. Cras a placerat odio. Aliquam consectetur luctus magna, at vehicula nibh porttitor sit amet. Pellentesque dapibus mauris in dui bibendum placerat. Morbi elementum, eros id consectetur tristique, lacus lectus cursus tortor, semper vestibulum erat diam a dui. Etiam orci nisi, volutpat pulvinar vulputate vel, venenatis eu justo. Sed et sapien eget eros pharetra lobortis.
        
        Nulla risus lorem, dignissim sed ullamcorper eget, gravida a tortor. Morbi nulla nisl, adipiscing venenatis mattis ac, euismod a sem. Pellentesque consequat turpis non libero luctus sodales. Mauris nisi ipsum, volutpat eu tempor eu, fringilla vel leo. Nullam volutpat malesuada enim, ac cursus neque imperdiet vitae. Sed lacus eros, porttitor at interdum vel, varius fermentum enim. Aliquam massa ipsum, ullamcorper eget malesuada quis, volutpat vel lectus.
        
        Sed euismod bibendum ultricies. Proin vel tortor erat, quis rhoncus nisi. Phasellus at tortor risus, quis molestie nisl. Nunc at lacus magna, nec porttitor eros. Sed rhoncus ultrices vehicula. Nulla facilisi. Donec in arcu id sem aliquam aliquet. Nam nulla massa, ullamcorper mollis placerat nec, adipiscing sed purus. Ut est elit, cursus et ultrices et, rhoncus vitae ante. Vestibulum elit tellus, dictum lobortis luctus vel, tempus id metus. Aliquam a purus risus, eu viverra arcu. Donec massa eros, malesuada quis sollicitudin aliquam, sodales id...

CSS

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

.child { display: none; }

JavaScript

$(function() {      
      
    $(".parent").each(function() {

        var obj = $(this),
            objD = obj.data(),
            objChild = obj.find('.child'),
            scrollbars = obj.height() < objChild.height();
        
        obj
        .data({ "swipe": "in" })
        .swipe({
            
            fallbackToMouseEvents: true,
            swipe:function( event, direction ) {
                
                // swipeIN = swipe that shows #child 
                // ( Swiping is allowed for all directions ).
                if ( objD.swipe === 'in' ) {
                    
                    obj.data({ "swipe": "out" });
                    objChild.show();
                    
                    // If scrollbar exists, set allowPageScroll data 
                    // to 'vertical', so that next time when you swipe 
                    // up or down, you can scroll vertically.
                    scrollbars && obj.swipe('option', 'allowPageScroll', 'vertical');
                    
                }
                // swipeOUT = swipe that hides#child 
                // If scrollbars don't exist, swipe at any direction to hide.
                // If scrollbars exits, swipe left or right to hide ( Up and Down is reserved for scrolling ).
                else if ( 
                    objD.swipe === 'out' && scrollbars && ( direction === 'left' || direction === 'right' )  || 
                    objD.swipe === 'out' && !scrollbars
                ) {
                    
                    obj.data({ "swipe": "in" });
                    objChild.hide();
                    
                    // If scrollbar exists, set allowPageScroll data to
                    // false, so that next time when you swipe up or down,
                    // you actually trigger a swipe.
                    scrollbars && obj.swipe('option', 'allowPageScroll', false );
                    
                }
                
            }
            
       ...