Facebookページで、どうやっても縦スクロールバーが消えない
Facebookページを作るときに、必ずと言っていいほど問題になるのが、
「縦スクロールバーをいかに消すか？」
ということだと思います。
縦スクロールバーを消す方法としては、
- アプリの設定で、「iframeサイズ：Auto-resize」を選択
- JavaScript SDKを追加
- JavaScriptでウィンドウの高さを取得して、高さを動的に変える
といった手法が紹介されています。
しかし、私の場合、これらを行っても、どうしても縦スクロールバーが消えないのです。
正確に言うと、空のスクロールバーが残ってしまいます。
情報を求めてネットを探し回りますが、みんな JavaScript で解決している様子。
「困ったなー また、俺だけかよ・・・」とか思いながら、検索範囲を日本語以外に広げたところ、ようやくこちらが見つかりました。
Facebook iFrame Vertical Scrollbar Won’t Go Away
どうやら、ブラウザのデフォルトスタイルシートをリセットするCSSに、
html { overflow-y : scroll; }
が含まれていたのが原因だったようです。
html { overflow-y : hidden; }
を設定すると、スクロールバーが消えてくれました。
htmlタグではなく、bodyタグに入っている場合もあります。その場合は、
body { overflow-y : hidden; }
で解決します。
CMSを使っている人は要注意ですね。
というわけで、修正したFacebookページはこちら。
Cherry Pie Web
「いいね！」お願いします。
