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

モバイル ブラウザでスクロールバーを表示する方法

「overflow:auto」や「overflow:visible」などの CSS プロパティがスクロールバーを表示しているにもかかわらず、デスクトップ ブラウザやモバイル ブラウザでは、スクロールが開始されるまで非表示になることがよくあります。この記事では、非効率な jQuery ライブラリを使用しなくても、モバイル デバイスでスクロールバーを常に表示できるようにする方法について説明します。

次の HTML および CSS コードを検討してください。

<div>

#wrapper {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent {
    width: 100%;
    height: 100%;
}

スクロールバーを作成するにはモバイル デバイスで常に表示されるようにするには、次の 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 ブラウザ エンジンに固有であり、スクロールバーの外観を変更し、モバイル デバイスでの表示を確保します。

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