Q: What is the best way to disable scrollbars in the iframe?
A1: the "scrolling=no" attribute
A2: "overflow: hidden" on the containing div
A3: "overflow: hidden" on the iframe
A4: "overflow: hidden" on the body of the child
Scrolling tests
Notes
-
Initially the iframe has the correct dimensions (300x300) in all
browsers, except A1 in iOS5, where it is the width of the content.
-
After "Translate", in any iOS >= 4.2, A1, A3 and A4 are
expanded to the width of the content (this is pretty weird).
-
A1: Works in all browsers except iOS.
-
A2: Unsurprisingly, does not prevent scrollbars in any
browser. Does not prevent scrolling in Android. BUT: it is the only
thing that always enforces iframe dimensions on iOS.
-
A3: Hides scrollbars in Gecko. Not in Opera or WebKit, and
does not prevent scrolling in Android. Not a good solution.
-
A4: Hides scrollbars in all browsers
(except iOS after translate). In Gecko after translate, no
subsequent columns are visible — overflow hides the
second and subsequent columns.
-
Translate is the only thing that works identically in
all browsers, for all iframes. Except Gecko/A4 (see previous note).
-
Scroll frame bodies has no effect in Gecko, Opera or Android.
Works for all iframes in WebKit. Works for A3 and A4 in iOS5, works
for all iframes in iOS4.
-
Scroll frame windows works in Gecko except Gecko/A4.
Works for all iframes in WebKit, Opera, iOS4, and iOS5 except
A1 and A2. Does not work at all in Android, weirdly.
-
Scroll iframe elements and Scroll iframe parents
do nothing in any browser.
Result
For all browsers, we will use A1. For iOS, we will additionally apply
A2 (to constrain the iframe).
Movement should be done by translating.
Scrolling the frame window (frame.contentWindow) —
this works in iOS5 as well for R. It works everywhere except Android,
which sadly rules it out.
R: "overflow: hidden" on container + "scrolling=no" on iframe