30

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

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

iOSではスクロール可能ですが、スクロールバーは表示されませんが、ドラッグしてスクロールできます。

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

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

4

5 に答える 5

25

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;
}
于 2012-11-14T13:07:27.173 に答える
8

overflow: scroll;Android 3（API 11）以降でサポートされています。

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

于 2012-08-16T05:52:21.447 に答える
3

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

于 2012-05-20T18:26:51.053 に答える
0

完全を期すために：

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

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

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

ただし、サム要素はドラッグできません。その下または上のトラックをタップすることによってのみ移動できます。

また、これらのスタイルはすべての Webkit ブラウザーでスクロールバーの外観を変更するため、Android 2.3 にのみ適用されるクラスを追加することをお勧めします。

于 2014-07-31T14:03:26.423 に答える
-5

CSS でスクロールバーのスタイルを定義することにより、Android で DIV をスクロール可能にできます。この記事では、その方法を説明しています: http://css-tricks.com/custom-scrollbars-in-webkit/

于 2012-08-30T21:14:22.047 に答える