freestyling Posted June 8, 2016 Share Posted June 8, 2016 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? Link to comment Share on other sites More sharing options...
davej Posted June 8, 2016 Share Posted June 8, 2016 Couldn't an @media query hide the entire thing and unhide a different version? Link to comment Share on other sites More sharing options...
freestyling Posted June 9, 2016 Author Share Posted June 9, 2016 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now