Macでスクロールバーを表示する

Macではパソコンの設定によってはスクロールバーが表示されないので、サイト側の設定で表示できるか試してみました。

スクロールバーの設定

スクロールバーの設定は、システム環境設定 > 一般 から変更できます。
デフォルトでは「マウスまたはトラックパッドに基づいて自動的に表示」になっているようです。

今回は「スクロール時に表示」に変更して試してみます。
　

サンプルコード

表示方法ですが、Webkit系のブラウザでスクロールバーをカスタマイズできる「::-webkit-scrollbar」を使うことで表示させることができるようでした。

<div class="scroll">
	<p>テキストテキスト</p>
	<p>テキストテキスト</p>
	<p>テキストテキスト</p>
	<p>テキストテキスト</p>
	<p>テキストテキスト</p>
</div>

.scroll {
	width: 300px;
	height: 150px;
	overflow-y: scroll;
}
::-webkit-scrollbar {
	width: 8px;
	background: gray;
}
::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: red;
}

スクロールバー表示のデモページ

注意点として、Webkit系のブラウザへの指定になるため、Firefoxには効きません。
また、対応策は後述しますが、WindowsやスマホのchromeやSafariにも適用されてしまいます。

上記サンプルではページ全体のスクロールバーと.scrollに対して設定されましたが、要素毎で設定を変更することもできます。

.scroll {
	width: 300px;
	height: 150px;
	overflow-y: scroll;
}
html::-webkit-scrollbar {
	width: 8px;
	background: gray;
}
html::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: red;
}
.scroll::-webkit-scrollbar {
	width: 16px;
	background: gray;
}
.scroll::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: green;
}

要素毎でスクロールバーを変更するデモページ

前述の通り、Webkit系のブラウザでスクロールバーをカスタマイズしているため、WindowsやスマホのchromeやSafariにもスクロールバーが適用されてしまいます。
この対策として、ユーザーエージェントでMacかどうかを判定して、Macの場合のみhtmlにclassを追加するようにしてみます。

// userAgent
var ua = navigator.userAgent.toLowerCase();

// Mac
isMac = ((ua.indexOf('mac') > -1) && (ua.indexOf('os') > -1)) && !((ua.indexOf('iphone') > -1) || (ua.indexOf('ipad') > -1) || (ua.indexOf('windows') > -1));

$(function() {
	if(isMac) {
		$('html').addClass('is-customscroll');
	}
});

これでMacの場合にだけhtmlに.is-customscrollが追加されるようになったので、CSSにも指定を追加します。

html.is-customscroll::-webkit-scrollbar {
	width: 8px;
	background: gray;
}
html.is-customscroll::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: red;
}
html.is-customscroll .scroll::-webkit-scrollbar {
	width: 16px;
	background: gray;
}
html.is-customscroll .scroll::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: green;
}

これでうまくいくかと思ったのですが、Safariではスクロールバーが表示されませんでした。
Safariの場合はJavaScriptで後から変更することができないようです。
Macのみスクロールバーを変更するデモページ

設定を逆にして、Macでない場合に.is-no-customscrollを付けるようにしてみます。

// userAgent
var ua = navigator.userAgent.toLowerCase();

// Mac
isMac = ((ua.indexOf('mac') > -1) && (ua.indexOf('os') > -1)) && !((ua.indexOf('iphone') > -1) || (ua.indexOf('ipad') > -1) || (ua.indexOf('windows') > -1));

$(function() {
	if(!isMac) {
		$('html').addClass('is-no-customscroll');
	}
});

:not()を使って、.is-no-customscrollが付いていない場合のみスクロールバーの設定を行うようにします。

html:not(.is-no-customscroll)::-webkit-scrollbar {
	width: 8px;
	background: gray;
}
html:not(.is-no-customscroll)::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: red;
}
html:not(.is-no-customscroll) .scroll::-webkit-scrollbar {
	width: 16px;
	background: gray;
}
html:not(.is-no-customscroll) .scroll::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: green;
}

これでMacのSafari、chromeでスクロールバーを設定することができました。
Macのみスクロールバーを変更するデモページ

補足ですが、::-webkit-scrollbarはMDNだと非標準となっているので使用の際はご注意ください。
　

【参考サイト】

• CSSでスクロールバーをカスタマイズ – Qiita
• ::-webkit-scrollbar – CSS: Cascading Style Sheets | MDN