A quick hack with a div overlay to stop Mapbox iframe map from breaking the scroll of the page

gistfile1.js

/*
	<iframe id='map' width='100%' height='500px' frameBorder='0' src='https://a.tiles.mapbox.com/v3/laurakalbag.ie85aj18/attribution,zoompan,geocoder,share.html'></iframe>
	
	<!-- This overlay is used to prevent Mapbox from breaking the scroll of the page on touch-enabled devices. -->
	<div id="overlay" class="overlay" style="position: relative; width: 100%; height: 511px; margin-top:-511px;">
		<img src="" width: 100% height: 500px>
	</div>
*/

//
// Fix Mapbox breaking a smooth page scroll on touch-enabled devices.
//
var scrollPos;
var lastTimeoutId;

var disableMapOnScroll = function(e){
	
	// Scrolling — display the blocker div.
	document.getElementById('overlay').style.display = "block";

	// Save the scroll position
	scrollPos = window.scrollY;

	// Clear any previous timeouts for the scroll stop check 
	// so we only check once regardless of number of scroll events.
	clearTimeout(lastTimeoutId);

	// Check if scroll has stopped (if scroll position hasn’t changed in 100ms.)
	lastTimeoutId = setTimeout(function() {
		if (window.scrollY == scrollPos) {
			// Stopped, hide the blocker div.
			scrollPos = -1;
			document.getElementById('overlay').style.display = "none";
		}
	}, 100);
}
// Listen for scroll events on non-touch and touch-enabled devices.
window.addEventListener('scroll', disableMapOnScroll);
window.addEventListener('touchmove', disableMapOnScroll);