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

WebKit/Blink でトラックパッド ユーザーの非表示スクロールバーを克服する

UIKit/Blink のデフォルト動作により、MacOS 上のトラックパッド ユーザーのスクロールバーが隠蔽され、ユーザーの操作が妨げられる可能性があります交流。この問題を解決し、スクロールバーの表示を一貫して行うには、次の手順に従います。

1.デフォルトのスクロールバーの動作を無効にする:

-webkit-Appearance を使用して WebKit のデフォルトのスクロールバーの外観を無効にします: none; ::-webkit-scrollbar 擬似要素の CSS プロパティ。

2.カスタム スクロールバー スタイルの定義:

デフォルトのスタイルは削除されたため、独自のスタイルを定義する必要があります。次の 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;
}

3.スクロール可能な要素にスタイルを適用:

カスタム CSS をスクロール可能な要素に適用し、トラックパッドの使用状況に関係なく、スクロールバーが常に表示されるようにします。これにより、一貫したユーザー エクスペリエンスが提供され、潜在的な混乱が排除されます。

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