モバイル ブラウザでスクロールバーを確実に表示するにはどうすればよいですか?

モバイル ブラウザのスクロールバーの表示設定

Web ページでスクロール可能なコンテンツを管理する場合、モバイル デバイスでのスクロールバーの表示を確保することが課題になる場合があります。 「overflow:auto」や「overflow:visible」などの標準 CSS プロパティを採用しているにもかかわらず、ユーザーがスクロールを開始するまでスクロールバーは非表示のままであることがよくあります。

これに対処するには、次の CSS ルールを実装することを検討してください。

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

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

これらのルールは「-webkit-」プレフィックスを利用し、Webkit ベースのブラウザとの互換性を確保します。スクロールバーの外観、サイズ、色をカスタマイズして、モバイル デバイスでより目立つようにし、見やすくします。

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