iframeの中身にスクロールバーを常に表示させる方法（Mac：Safari、Chrome）

Macはデフォルトでスクロールしたとき以外はスクロールバーが出ないようになっています。

通常のWEBページだとコンテンツが画面より多くても、ユーザーはスクロールして見ようとすると思いますが、iframeだとコンテンツがまだあると気づかずに閉じてしまう恐れがあります。

そのため、iframeの中はスクロールバーを常に表示する方がいい場合が多いと思います。今回はその方法をご紹介します。

◯解決方法

<style>
::-webkit-scrollbar { -webkit-appearance:none; width:7px; }
::-webkit-scrollbar-thumb { border-radius:4px; background-color: rgba(0,0,0,.5); box-shadow:0 0 1px rgba(255,255,255,.5); }
</style>

iframeのhtmlに上記のコードを入れると、コンテンツがあふれたときだけスクロールバーが表示されるようになりました。ただ、FireFoxでは一瞬だけ出て消えてしまいました。

※上記のコードのうち、widthとborder-radius、background-color、box-shadowを変えることで、スクロールバーをデザインすることも可能です。

※cssファイルに記述しても動きますが、他のページにも適用するcssに書くと、そのページにもスクロールバーがついてしまうので要注意です。

◯参考サイト

スクロールバーをデザインする方法が書いています。 http://unformedbuilding.com/articles/learn-about-webkit-scrollbar/

◯関連記事

colorboxでiframeを表示した時に起こる問題を記事にしています。

colorboxでモーダルウィンドウの中身がスクロールできなくなる現象を解決する方法