To favour the majority of our web traffic on mobile, the iframe implementation on this page - www.capewrathultra.com/results/ - has been wrapped in a div allowing it to behave with momentum based scrolling using -webkit-overflow-scrolling. Sadly this leaves desktop users with a double scroll bar, which I have given up trying to solve - whatever code I tweak within the iframe parameters it simply seems that I end back up with the status quo for best overall usability.
<div style="-webkit-overflow-scrolling:touch; overflow-y: scroll; overflow: auto; height: 900px; width: 100%;"><iframe frameborder="0px" height="100%" scrolling="auto" seamless="" src="http://results.sportident.co.uk/home/multistage.html?multistageid=3870226f-3880-45e5-b63e-827847cf926f&mobile=true" width="100%"></iframe></div>
Yes it's a bit hacky Anyone?
Current (compromised with secondary [dud] scrollbar) desktop view:
Apologies if this is actually for the CSS subforum?