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

モバイル ブラウザでスクロールバーを表示できるようにする

Web 開発では、コンテンツが表示されていない場合でも、モバイル ブラウザでスクロールバーを表示することが望ましいことがよくあります。最初はスクロールしました。デスクトップ ブラウザでは「overflow:auto」や「overflow:visible」などの CSS プロパティによってこれが実現されますが、モバイル ブラウザではスクロールが試行されるまでスクロールバーが非表示になる傾向があります。

この問題に対処するには、次の方法で CSS を強化できます。次の Webkit 固有のプロパティ:

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

このコードは、スクロールバーの外観を変更し、スクロールバーを表示し、幅と外観を調整します。これらのプロパティを適用すると、デスクトップとモバイル デバイスの両方でスクロールバーが一貫して表示されるようになり、ユーザー エクスペリエンスが向上します。

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