2012年03月05日

iPhone対応サイトの不正な横スクロール @ iPod touch

おそらく、iPhone対応のサイトを作っている時に変な横スクロールを発生させない為に、と言うか、他の理由も含めて既にそうなっている場合もありますが、ページ全体を囲んでいる要素のスタイルシートに overflow:hidden; を書いているんじゃないかなと思いますが、もとのHTMLソースを修正出来ない場合など、何らかの理由で overflow:hidden; を指定する事が出来ない場合もあるかと思います。その場合の対策としてこんな感じのJavascriptを用意すれば良いかな。

window.onresize = function(){
var pos_y = (document.documentElement.scrollTop || document.body.scrollTop);
window.scrollTo(0,pos_y);
}

見ての通り、Y方向の移動量を取得しておいて、X方向だけ0にしてます。

当初、 window.onorientationchange を使えば良いだろうと思ったのですが、どうやらAndroidで使えないらしい。iPhoneだけだったらオリエンテーションの変化を検出する onorientationchange だけで良かったのだが、そうも行かないので、 onresize を使ってます。一応iOS 5のiPhoneとiPhone OS 3のiPod touchで確認したので、この方法でiOS系は問題ないはず。

ただ、この方法は、あくまでも最終手段なので、他の手法で何とか成る場合は、そっちの方が良いかも。

閲覧数: 2301 / はてなブックマークusers

関連商品

amazon.co.jp・詳細ページへ

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト