macOS で WebKit/Blink ブラウザのトラックパッド ユーザーのスクロール バーを確実に表示するにはどうすればよいですか?

WebKit/Blink で MacOS トラックパッド ユーザーのスクロール バーの表示を確保する

Safari や Chrome などの WebKit/Blink ブラウザでは、MacOS のスクロール バーOS X Lion (10.7) 以降、特有の動作が発生しています。トラックパッドを使用する場合、ユーザーのカーソルがスクロール可能領域上に移動するまで、スクロール バーは自動的に非表示になります。最小限のタッチに見えるかもしれませんが、この動作は、特にスクロール バーがスクロール可能な要素の唯一のインジケーターとして機能する場合に混乱を招く可能性があります。

解決策: WebKit の疑似要素を活用する

この問題を修正し、スクロール バーを強制的に表示したままにするために、WebKit を通じてスクロール バーの外観を操作できます。 -webkit-scrollbar 擬似要素。 -webkit-Appearance: none でデフォルトの外観と動作を無効にすることで、スクロール バーのスタイルを制御し、その可視性を確保できます。

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

ただし、デフォルトのスタイルをオーバーライドしているため、スクロール バーの外観も自分で定義する必要があります。次の CSS は、半透明の非表示スクロール バーを再作成します:

.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; 
}

これらの変更により、トラックパッドの使用状況やカーソルの位置に関係なく、スクロール可能な要素のスクロール バーが MacOS 上で表示されたままになり、明瞭さが向上し、操作が容易になります。ユーザー向けのナビゲーション。

以上がmacOS で WebKit/Blink ブラウザのトラックパッド ユーザーのスクロール バーを確実に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。