Facebookページで、どうやっても縦スクロールバーが消えない

Facebookページを作るときに、必ずと言っていいほど問題になるのが、
「縦スクロールバーをいかに消すか？」
ということだと思います。

縦スクロールバーを消す方法としては、

1. アプリの設定で、「iframeサイズ：Auto-resize」を選択
2. JavaScript SDKを追加
3. 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
「いいね！」お願いします。