ウェブ、ショウジン

Facebookページでスクロールバーが出ないように設定したのにその「残骸」のようなものが表示されてしまう

2011-7-19
Category
Facebook

iframeを用いたFacebookページ(アプリ)において
デフォルトだと高さ800pxを超えるサイズのものは
縦にスクロールバーが表示されてしまう。(横は520以上)

これを消すには

・アプリの設定でiFrameサイズを「Auto-resize」を選択
・JavaScript SDKを追加
・JavaScriptでウィンドウの高さを取得して、高さを変更する

しかし、これを使ってもスクロールバーの残骸のようなものが
表示される場合がある。

Mac OSXだと
Chrome(ver.12)、Safari(ver.5)で。

Windows(XP)だと
IE 7、IE 8、Chrome(ver.12)で。

scrollbar

その場合はデフォルトスタイルを初期化するのに使っている
リセットcss等を確認してみる。

html {
    overflow-y:scroll;
}

これが原因。

なので、これを

html {
    overflow-y:hidden;
}

htmlではなく、bodyにあてている場合もあるので
その場合はそちらを同様に処理。

ページをリロードしても残骸が消えない場合はグイグイと
リロードを続けるか、一度iframe内のページのみを表示させてから
もどってみると解消されたりする。(キャッシュの問題なのでブラウザでキャッシュを削除すればOK)

以下の記事に助けられました。ありがとうございました。
Facebookページで、どうやっても縦スクロールバーが消えない

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿