2012年10月11日

内部リンクの position を fixed にすると iPhone 用サイトでスムーススクロールできない(iOS5.x対象)

iPhone(iOS5) 向けのウェブサイトに、jQuery でスムーススクロールさせるための内部リンク(anchor)を置いたのですが、うまく動きません。

最初のタップでは正常にスクロールするのですが、その最初のスクロールの直後にタップしても反応せずスクロールしないのです。スムーススクロールの後に指で少しでもスクロールさせてやれば、また反応するようになります。

どうやらスクロール用の内部リンクを css で position を fixed で固定させてしまうと、このような現象が起こるようです。

回避策としては javascript でスクロール直後に body の height を1px追加してあげることにしました。もっとスマートな回避策があるのかもしれませんが。

これをスクロール直後に実行させるようにするとよい

//javascript(jQuery)の例
var newBodyHeight = $('body').height() + 1;

$('body').css({
    height: newBodyHeight
});
ラベル:iPhone javascript jquery
posted by ガトー at 17:52| Comment(0) | WEB | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。