WebKit/Blink ブラウザの使用時に Mac のトラックパッドでスクロール バーが消えるのを防ぐにはどうすればよいですか?

スクロール バーが消えるのを防ぐ: WebKit/Blink での Mac トラックパッド ユーザーのための解決策

問題:

Mac OS X Lion を搭載した macOS 上のユーザー(10.7) 以降では、WebKit/Blink ブラウザ (Safari や Chrome など) でトラックパッドを使用すると、非表示のスクロール バーが表示される場合があります。スクロール バーは要素がスクロール可能であることを示す重要な視覚的合図を提供するため、この動作は混乱を招く可能性があります。

解決策:

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

結論:

この CSS スタイルを実装することで、WebKit/Blink ブラウザーの Mac トラックパッド ユーザーにスクロール バーが確実に表示されるようにすることができます。一貫性のある直感的なスクロール エクスペリエンス。

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