iframe

[freestyling]

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.

 

Current code:

<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?

[davej]

Couldn't an @media query hide the entire thing and unhide a different version?

[freestyling]

Thanks davej, sadly I have no access to the stylesheets (it's a CMS) and can't use @media query inline. I wonder if I could use the style markup as per http://stackoverflow.com/questions/9808233/is-it-possible-to-put-css-media-rules-inline - I will have a crack. Any advice welcome!