JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mattbryson/TouchSwipe-Jquery-Plugin/1.5.x/jquery.touchSwipe.js"></script>
<div id="parent">
    <div id="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

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

#child { display: none; }

JavaScript

$('#child').show();
var parentH = $('#parent').height(),
    childH = $('#child').height();
$('#child').hide();

$('#parent').swipe({
  swipe:function( event, direction ) {
 
      
        // Current event: swipeIN
        if ( !$(this).hasClass('active') ) {
            
            var swipeIn = true;
            
        }
        // Current event: swipeOUT
        else if ( $(this).hasClass('active') ) {
                      
            var chGph = childH > parentH;
            
            // IF swipe direction is up or down and the child is longer than parent....
            if ( direction === 'up' && chGph || direction === 'down' && chGph ) {
                var swipeOut = false;                
                // Is there a way for me to force the plugin option allowPageScroll: 'vertical' at this point?
            }
            else {
                var swipeOut = true;
                // ...and again here disable the allowPageScroll: 'vertical'?
            }
            
        }
      
        doStuff( swipeIn, swipeOut );

  },
  fallbackToMouseEvents: true, // The testing should still be done via touch device to see the problem.
  threshold: 40
});


function doStuff( swipeIn, swipeOut ) {
    
    $('#parent').toggleClass('active');
    
    if ( swipeIn ) {
        $('#child').show();
    }
    else if ( swipeOut ) {
        $('#child').hide();
    }
   
}