JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
</div>
CSS
#container {
height: 200px;
background: lightblue;
overflow: hidden;
}
JavaScript
//NOT PART OF THE SOLUTION. This code just populates the demo iframe
(function() {
var iframe = document.createElement('iframe');
iframe.setAttribute('style', 'height:280px;');
iframe.addEventListener('load', function(e) {
var bod = e.target.contentDocument.body;
bod.setAttribute('style', 'margin:0;padding:10px;line-height:20px;');
bod.innerHTML = '<b>draggable iframe top</b><br>'
+'0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>'
+'<b>draggable iframe bottom</b>'
});
document.getElementById('container').appendChild(iframe);
})();
//THIS IS THE SOLUTION
(function() {
var mouse = true //Set mouse=false to disable mouse support!!!
, iOS = /iPad|iPhone|iPod/.test(navigator.platform);
if(mouse || iOS) {
(function() {
var currentFrame
, startEvent, moveEvent, endEvent
, screenY, translateY, minY, maxY
, matrixPrefix, matrixSuffix
, matrixRegex = /(.*([\.\d-]+, ?){5,13})([\.\d-]+)(.*)/
, min = Math.min, max = Math.max
, topWin = window;
if(!iOS) {
startEvent = 'mousedown';
moveEvent = 'mousemove';
endEvent = 'mouseup';
}
else {
startEvent = 'touchstart';
moveEvent = 'touchmove';
endEvent = 'touchend';
}
setInterval(scrollFix, 500);
function scrollFix() {fixSubframes(topWin.frames);}
function fixSubframes(wins) {for(var i = wins.length; i; addListeners(wins[--i]));}
function addListeners(win) {
try {
var doc = win.document;
if(!doc.draggableframe) {
win.addEventListener('unload', resetFrame);
doc.draggableframe = true;
doc.addEventListener(startEvent, touchStart);
doc.addEventListener(moveEvent, touchMove);
doc.addEventListener(endEvent, touchEnd);
}
fixSubframes(win.frames);
}
catch(e) {}
}
function resetFrame(e) {
var doc = e.target
, win = doc.defaultView
, iframe = win.frameElement
, style = getComputedStyle(iframe).transform;
if(iframe===currentFrame) currentFrame =...