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

WebKit/Blink でトラックパッド ユーザーのスクロール バーが消えるのを防ぐ

macOS の WebKit/Blink ブラウザ (Safari/Chrome) のデフォルト動作では、長い間、ユーザーに対してスクロール バーが自動的に非表示になっていました。 10.7 以降のバージョン (Mac OS X Lion) でのトラックパッドの操作。この動作は、要素のスクロール可能性を示す共通の視覚的手がかりを削除するため、特に問題となる可能性があります。

問題の説明

スクロール バーを一貫して表示することが困難になります。 WebKit ベースのブラウザのスクロール可能な要素の場合macOS.

ソリューション

WebKit は強力な疑似要素システムを提供し、-webkit-scrollbar 疑似要素の使用を通じてスクロール バーの広範な操作を可能にします。スクロール バーを常に表示し続けるには:

1. デフォルトの外観を無効にする: -webkit-Appearance プロパティを使用し、none に設定して自動非表示動作をオーバーライドします。
2. カスタム スタイル: スクロール バーの特定のスタイル設定を手動で定義します。デフォルトの外観を削除すると、非表示のスクロール バーが表示されます。次のプロパティの指定を検討してください:

• -webkit-scrollbar-track: 背景色と境界線の半径
• -webkit-scrollbar-サム: 枠線、背景色、枠線radius
• -webkit-scrollbar-width および -webkit-scrollbar-height: 水平スクロール バーと垂直スクロール バーのそれぞれの寸法

例

次の 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; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

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

ビジュアルデモンストレーション

追加メモ

• このソリューションは、WebKit ベースのブラウザに固有です。 macOS.
• 提供されている CSS は例として機能し、目的の外観に合わせて調整できます。

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