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/
