3

プロパティを使用-webkit-scrollbarして iOS と 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);
}
4

1 に答える 1

0

これは、少しの 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 のスタイルを設定しません。)

非タッチ デバイスのみがスクロールバー スタイルを取得し、Android は取得しないように::webkit-scrollbar-*、 をクラスで事前に修正します。.no-touch

.no-touch ::-webkit-scrollbar {
    width: 5px; 
}
.no-touch ::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.5);
}
/* ... etc */

これで、非タッチ デバイスにスタイル付きのスクロールバーが表示されます。タッチ デバイスはそうではありません。

于 2013-10-26T09:22:53.123 に答える