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

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

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

  1. アプリの設定で、「iframeサイズ:Auto-resize」を選択
  2. JavaScript SDKを追加
  3. JavaScriptでウィンドウの高さを取得して、高さを動的に変える

といった手法が紹介されています。

しかし、私の場合、これらを行っても、どうしても縦スクロールバーが消えないのです。
正確に言うと、空のスクロールバーが残ってしまいます。

facebook20100617-1.png

情報を求めてネットを探し回りますが、みんな 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
「いいね!」お願いします。

この記事を書いた人

川井 昌彦
川井 昌彦
FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Vektor Passport(ライセンス期間1年)
VK Filter Search Pro
Vektor WordPress Solutions
PAGE TOP