web-dev-qa-db-ja.com

Androidブラウザのバグ？div overflow scrolling

Androidブラウザでdivのオーバーフローコンテンツをスクロール可能にできますか？

他のすべての最新ブラウザーでスクロール可能です。

IOSではスクロール可能です-ただし、スクロールバーは表示されません-しかし、ドラッグでスクロール可能です。

簡単な例： http://jsfiddle.net/KPuW5/1/embedded/result/

これはすぐに修正されますか？

androidhtmlandroid-browser
30
mercador

Android 3.0以降ではoverflow:scrollがサポートされていますが、<3.0では別の話です。 iScrollのようなポリフィルである程度成功するかもしれませんが、それにはコストがかかります。複雑なレイアウトのサイトに実装することは難しく、サイトのコンテンツが変更されるたびにメソッドを呼び出す必要があります。メモリの使用も問題です。すでにパワー不足のデバイスでは、これらの種類のポリフィルによりパフォーマンスが低下する可能性があります。

別のアプローチをお勧めします：Modernizrを使用してオーバーフロースクロールのサポートを検出し、htmlタグにクラスを追加し、CSSを書き換えてページがボックス内ではなく「通常」にスクロールするようにします。

/* For browsers that support overflow scrolling */
#div {
    height: 400px;
    overflow: auto;
}

/* And for browsers that don't */
html.no-overflowscrolling #div {
    height: auto;
}
25
Husky

overflow: scroll;は、Android 3（API 11）の時点でサポートされています。

クロスプラットフォーム（つまりiOS <= 4.3.2）の場合 Cubiq iScroll は実装が簡単な修正です。

8
Alastair

スクロール可能なdiv要素に対して touchscoll.js を試すことができます

3
Joe Antonetti

完全を期すために：

スクロールバーは実際にはAndroid 2.3にありますが、非常にバグが多く、デフォルトでは幅が0になるようにスタイル設定されているため、表示されません。

次のようなスタイルを追加することで、それらを表示できます。

::-webkit-scrollbar {
    width: 30px;
}
::-webkit-scrollbar-track {
    background-color: $lightestgrey;
}
::-webkit-scrollbar-thumb {
    background-color: $lightgrey;
}

ただし、サム要素はドラッグ可能ではなく、トラックを上下にタップすることでのみ移動できます。

また、これらのスタイルはすべてのWebkitブラウザーのスクロールバーの外観を変更するため、Android 2.3。

0
emik