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

この質問は、「overflow:auto」または「スクロール可能なコンテンツでは「overflow:visible」。スクロールバーはデスクトップ ブラウザでは表示されますが、モバイル デバイスではアクティブにスクロールしない限り消えます。

この問題を解決するには、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;
}

このコードは、スクロールバーの幅、高さ、つまみの色、トラックの色などの外観を定義します。これらのプロパティをカスタマイズすると、スクロールする前であっても、モバイル デバイスでスクロールバーを常に表示できるようになります。