iOSとAndroidでスクロールバーを表示するには-webkit-scrollbarプロパティを使用していますが、Androidデバイスでコンテナをスクロールしているときにスクロールバーの幅に応じてコンテンツがちらつきます。Androidのスクロールバー
どうすればこの問題を解決できますか？
#container {
width: 200px;
height: 200px;
overflow-y: auto;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb {
margin-right: 5px;
border-radius: 5px;
background: rgba(255,255,255,0.5);
}
これは、Javascriptを使用して行うことができます。
<script>
// Add a .touch or .no-touch class to <html> based on device capability
document.documentElement.setAttribute('class',
'ontouchend' in document ? 'touch' : 'no-touch');
</script>
（この行はCSS前を配置していることを確認します - デスクトップブラウザは、そうでない場合はCSSのスタイルを設定しません。）
プリ修正::webkit-scrollbar-*を.no-touchクラスでそれが唯一の非保証するために、タッチデバイスはスクロールバースタイルを取得し、アンドロイドはスクロールバースタイルを取得しません。
.no-touch ::-webkit-scrollbar {
width: 5px;
}
.no-touch ::-webkit-scrollbar-track {
background: rgba(0,0,0,0.5);
}
/* ... etc */
ここで、非タッチデバイスには、スタイル付きスクロールバーが表示されます。タッチデバイスでは表示されません。