Macでスクロールバーを常に表示したい場合の対処法

ページ内にスクロール領域を作ったのですが、どうもスクロールできるように見えなかったので、スクロールバーを常に表示するように、overflow-y: scroll;を追加してみたのですが表示されない。

使用しているPCはMacのOS X Yosemite。

原因はMacのデフォルトの設定で、非表示になっているようです。

非表示の設定を表示にしても自分だけなので無意味です。

てことで「::-webkit-scrollbar」を使って解決します。

以下をcssに追加します。

::-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);
}

これでMacOSでも常に表示されるようになります。

しかし、表示したい箇所以外にページ自体のスクロールバーも常に表示されてしまいました。

ということで表示したい要素だけにcssを記載する必要がありますね。

こちらの記事がとてもわかり易いですよ。

http://dev.classmethod.jp/client-side/webkit-scrollbar-design/

シェアしていただけますと嬉しいです! 

« »