web-dev-qa-db-ja.com

モーダル内のサファリでオーバーフローyが機能しない

ここにhtmlがあります：

<div style="height: 200px; position: relative;"  id="filterOptionsContainer">
                <table id="filterOptionsTable" class="table table-striped table-hover">
                </table>
            </div>

基本的に、テーブルに行を動的に追加しているので、コンテナにオーバーフローをスクロールさせたいと思います。最初に明白なことを試しました：

#filterOptionsContainer {
overflow-y: auto;
}

iOSモバイルデバイスのSafariを除き、どこでも問題なく機能します。

それ以来、考えて読むことができるスタイルのあらゆる組み合わせを試してみましたが、標準のオーバーフロースクロールを取得することはできません。最も近いのは、スクロールバーを表示することでした（実際にはスクロールしていませんでした）。

すべての助けに感謝します。 Safariのモーダルでdivのコンテンツをスクロールすることは不可能だと信じるのは難しいです...

編集：まだこの問題。解決する必要があります。

javascripthtmlioscss
26
pQuestions123

これを解決するには、モバイルデバイスで複数選択に切り替えて（スクロール可能なdivを非表示にします）（実際の解決策はありません）。すべての人に助けてくれてありがとう。

編集：私はついにこれを理解しました。基本的に何が起こったのかは、Safariを使用しているときに、IOSデバイスで複数選択を使用するように切り替えた後、それも奇妙に動作することでした。

さらに調べてみると、私の同僚は、スクロール可能なdivとmultiselectの両方でdojo touchイベントに気付きました（使用しているテンプレートはdojoを使用しています）。テンプレートのソースを調べて、これらのすべての要素にこれらのイベントが関連付けられている理由を調べ始めたところ、「dojo/touch」と呼ばれるdojoモジュールに気付きました。プロジェクトからこのモジュールを削除すると、Safariで要素が正常に機能します。

重要なのは、「dojo/touch」とIOS Safariは完全に互換性がないということです。

0
pQuestions123

このインラインを適用するか、Jqueryスクリプトを使用してみてください

 style="overflow-y: scroll; -webkit-overflow-scrolling: touch;"

またはJqueryスクリプトを介して

$("#filterOptionsContainer").css({
    "overflow-y": "scroll",
    "-webkit-overflow-scrolling": "touch"
});
12
Raja Mohammed

これを確認するためのIOS製品はありませんが、overflow: autoは、Safariの既知のバグです。

これを試して：

#filterOptionsContainer {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
5
Chris

2つのネストされたdivを使用して、垂直スクロールバーのみを表示するコード。

<!DOCTYPE html>
<html>
<body>
<div class="div1">     
    <div class="div2">     
111111<br>
222222222222222222222<br>
3333333333333333333333333333333333<br>
44444444<br>
55555555555555555555555555555<br>
6666666666666666666666666666<br>
77777777777<br>
88888888888888888888888888<br>
99999999999999999999999<br>
0000000000000000000000000000000<br>
aaaaaaaaaaaaaaaaaa<br>
bbbb<br>
cccccccccccccccc<br>
    </div>
</div>
</body>
</html>
<style>

.div1{
    overflow:auto;
    width:100px;
    height:100px;
}
.div2{
    overflow:hidden;
    width:100%;
}
</style>
1
Bug

どのソリューションも機能しない場合は、flexを試すことができます：1 1;これは、クロスブラウザをサポートしています。

1
Kristy Welsh

あなたはこれを試すことができます、それは私のためにうまくいきます

#filterOptionsContainer {
    overflow: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
}
1
Binh LE

オーバーフロー自動の後にoverflow-y:hidden;を設定できます。サファリでは、少なくともそのルールが適用されます。 参照

1
Microsmsm

Safariブラウザのバージョンを確認してください。そして、以下に示す基準と一致します：

  1. Safari 3.0以降で使用できます。
  2. IOS 1.0以降で利用可能。

条件に反する場合は、次の対策を講じます。

  1. ClearFixを適用

    .clearfix:after {visibility: hidden;}

理由：オーバーフローを設定しても要素のフロートはクリアされません

[〜＃〜]または[〜＃〜]

  1. 次のように、ルート/ボディレベルで相対的な要素の位置を設定します。

    body { position:relative; overflow-x:hidden; }

注：そのうちの1つだけを適用します。

ありがとう＆歓声

1
Amulya Kashyap