JSFiddle - React, Tailwind, and code Playground

by CobaltBlueDW

HTML

<div class='myMask'><iframe class='myFrame' src='../zHR8s' ></iframe></div>

CSS

.myMask{
    width: 316px;
    height: 416px;
    overflow: auto;
}
.myFrame{
    width: 300px;
    height: 400px;
}

JavaScript

/** toScrollFrame: turns a iframe wrapper into a scrollable masking region on iOS webkits
*
*   @param  iFrame  String   A CSS/jQuery Selector identifying the iFrame to scroll
*   @param  mask    String   A CSS/jQuery Selector identifying the masking/wrapper object
*   @return         Boolean  true on success, false on failure.
*/
var toScrollFrame = function(iFrame, mask){
    if(!navigator.userAgent.match(/iPad|iPhone/i)) return false; //do nothing if not iOS devie
    
    var mouseY = 0;
    var mouseX = 0;
    jQuery(iFrame).ready(function(){ //wait for iFrame to load
        //remeber initial drag motition
        jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e){
            mouseY = e.targetTouches[0].pageY;
            mouseX = e.targetTouches[0].pageX;
        });
        
        //update scroll position based on initial drag position
        jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e){
            e.preventDefault(); //prevent whole page dragging
            
            var box = jQuery(mask);
            box.scrollLeft(box.scrollLeft()+mouseX-e.targetTouches[0].pageX);
            box.scrollTop(box.scrollTop()+mouseY-e.targetTouches[0].pageY);
            //mouseX and mouseY don't need periodic updating, because the current position
            //of the mouse relative to th iFrame changes as the mask scrolls it.
        });
    });
    
    return true;
};

toScrollFrame('.myFrame','.myMask'); //add single-touch scrolling to example page