WebKit/Blink ブラウザの macOS トラックパッドでスクロール バーが隠れないようにするにはどうすればよいですか?

WebKit/Blink での macOS トラックパッド ユーザーのスクロール バーの隠蔽の防止

バージョン 10.7 以降の macOS では、WebKit/Blink ブラウザ (Safari など) 、Chrome) を使用していないときは、トラックパッド ユーザーからスクロール バーを自動的に非表示にします。この動作により、要素のスクロール可能性を決定するための重要な視覚的手がかりがわかりにくくなる可能性があります。

デフォルトの WebKit 動作:

Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!

プレスト動作 (例: Opera):

Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!

解決策: スクロール バーを永続的に表示する

スクロール バーを強制的に表示したままにするにはWebKit、-webkit-scrollbar を使用して外観を操作する疑似要素:

CSS:

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 8px;
}

Res ult:

Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!

デフォルトのスクロール バーの外観を無効にし、カスタム スタイルを定義することで、macOS トラックパッド ユーザーにスクロール バーが表示されたままになるようにします。