1

スクロール可能な div 内に配置すると、数千行のテーブルのような大きなコンテンツが切り取られていました (「css、ios、iPad、-webkit-overflow-scrolling: touch bug、大きなコンテンツが切り取られる」を参照) 。

<div class="longList">
  <!-- table with thousands of rows -->
</div>

CSS:

.longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch;}

いくつかの調査の後、http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/に従ってこれを解決しました。

そのため、position:fixed を追加するとこの問題は解決しましたが、新しい問題が発生しました。position:fixed を導入する前に、テーブルがページ幅全体を埋めていました。

更新された CSS:

    .longList {overflow: auto; height: 550px; margin: 0 auto; -webkit-overflow-scrolling: touch; position:fixed;}

(クラス longList を使用して) div で幅を指定して解決しようとしましたが、div で幅を指定するたびに、元の問題に戻りますが、テーブルは現在ページ全体を埋めています (幅に関して)。内容がまた途切れる！

このような状況に遭遇した人はいますか？

4

1 に答える 1

0

だから私はこれに役立つ解決策を見つけました。iFrame と埋め込みコンテンツの div の両方で同様の問題が発生していました。これが iFrame でどの程度うまく機能するかはわかりませんが、div ではうまくいくようです。

問題のある要素がページに表示されている間にページが読み込まれた後、次のコード行を使用します。これにより、要素の再描画/リフローが強制され、完全なコンテンツが表示されます。

//Fix for mobile webkit browsers not rendering full content
$('.divWithContent').parent().hide().show(0);

問題が発生している div または iFrame にラッパーをまだ追加していない場合は、ラッパーを追加する必要がある場合があります。これにより、必要以上のコンテンツをフラッシュしたり再構築したりしなくなります。

サンプル構造:

<div class="wrapper">
    <div class="divWithContent">
    ...
    </div>
<div>

ページの読み込み時に div が表示される場合、このソリューションを使用する方法の 1 つを次に示します。わずかな遅延も追加する必要がある場合があります。

$(document).ready( function() {
    $('.divWithContent').parent().hide().show(0);
}

要素が現在非表示の場合、これは機能しません。要素がデバイスのビューポートで現在表示されている必要はないようですが、少なくともページ上にあり、非表示になっていない必要があります。

于 2015-02-13T21:26:12.610 に答える