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を記載する必要がありますね。

スクロールバー自体を自作してしまうことによって、常に表示するという方法はこちら↓↓↓
https://a-side-job.com/web_material/scrollbar_self_made/

« »