質問: PCでiframeタグで別ファイルの一部を表示しています。 別ファイルはiframeの高さ以上の高さが有ります。 iPhoneでは下記のサイトを参考に高さを制限しています。 iPhoneでもiframeを使ってスクロールさせて、かつ、PCとも外観を揃える方法 - Qiita PCもiPhoneもスクロールはさせたくないで、iframeの要素に`scrolling="no"`を指定しました。 PC上では目的通り「スクロールしない状態」で一部表示されることが確認できました。 ところが、iPhoneのsafari及びchromeのおいては普通にスクロールしてしまいます。 「iPhoneでiframeをスクロールさせる方法」はたくさん情報が見つかったのですが、 「iPhoneでiframeをスクロールさせない方法」を見つけることができませんでした。 どのようにすればスクロールさせないようにできるでしょうか? よろしくお願いします。
回答: 対応策が見つかりました。 iframe側の`` ``に `overflow: hidden;height: 100%;`を指定します。 この設定によりiPhoneでも高さ制限のあるiframeもスクロールしなくなります。 しかしながら、呼び込み元に指定するのは現実的ではありません。 そこでjQueryを使って呼び出し側からiframe内のdomに追記するようにしました。 ``` $('#famreview').load(function(){ var $iframe = $('#インラインフレームオブジェクトを指定'); var ifrmDoc = $iframe[0].contentWindow.document; $('html,body',ifrmDoc).css('overflow','hidden').css('height','100%'); }); ``` もし、何かのアクション(クリック)などでiframeのスクロールを有効にしたい場合は下記の通り ``` var $iframe = $('#インラインフレームオブジェクトを指定'); var ifrmDoc = $iframe[0].contentWindow.document; $('html,body',ifrmDoc).css('overflow','visible').css('height','auto'); ``` 参考にしたサイト iosでもスクロールさせないようにする iframe内のDOMを操作する方法 jQuery iframeの読み込み完了後のタイミングで処理を実行する方法