iPhone(iOS)のブラウザで、iframeの中でスクロールアニメーションが動かない!とき。

iPhone(iOS)のブラウザで、iframeの中でJqueryを使ったスクロールアニメーションが動かない場合がある。
iPHone自体のiframeへの対応が甘いところもあるのだが、原因を先に言うと、
Jqueryのセレクターがどれをもってスクロールさせればいいのかわからなくなっている
ということのようだ。
いろいろ探っては試してみたらなんとなくわかってきたのでメモ。

みんなこんなの使ってるでしょ↓。

$('body,html').animate({ scrollTop: 0 },1500);

iPhone(iOS)でiframeを使う使わない問わず、ページスクロールに$("html")とセレクターを打っても動かなかったりする。
他のブラウザはばっちりなのに、safariの場合は$("html")でなく、$("body")で指定しないと動かないことがある。ここの境界はあいまいだ。問題ないときもあれば問題がでるときもある。なのでhtmlで指定する、body
で指定する、この両方を覚えておくと問題解決の糸口になるだろう。

なのでiOSのときはbodyで指定し、さらにparent.documentでiframeの大枠にあるbodyだよ、と明示してやる。
参考:http://stackoverflow.com/questions/30478157/jquery-scrolltop-not-working-inside-iframe-on-ios
また、contents()を使用して、iframe以下の要素をしっかり指定する。
なので結果は、body,parent.document,contents()を組み合わせた以下のようになるのだ。

$('body', parent.document).contents().animate({ scrollTop: 0 },1500);

やってみてくれよな!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA