web-dev-qa-db-ja.com

Safariの位置：オーバーフロー：自動要素でスティッキーが機能しない

CanIUse によると、position:sticky要素内のSafariおよびoverflow:autoには既知の問題があります。

オーバーフローが自動に設定されている親は、位置を防ぎます：スティッキーはSafariで機能しません

ただし、これは私が必要とする正確なユースケースです。スクロール可能なdivがあり、2つの列に分割されています。 div全体をスクロールしても、右側の列は固定され、移動しないでください。右の列でposition:stickyを使用しているのは、ユーザーがカーソルを右の列に置いたまま、左の列をスクロールできるようにするためです。そして、これが私が機能したことがわかった唯一の解決策でした。

Firefoxの動作例/ Chromeはこちら： http://cssdeck.com/labs/zfiuz4pc スクロール中はオレンジ色の領域が固定されますが、Safariでは固定されますない.

上記の例には私の問題に不要なラッパーがいくつかありますが、このコードを機能させたい環境にできるだけ忠実に複製したいと思いました。その基本的な要点は次のとおりです。

<div class="modal-content">
  <div class="left-content">
  </div>
  <div class="sticky-element">
  </div>
</div>

そしてCSS：

.modal-content {
  display: flex;
  overflow: auto;
  flex-flow: row nowrap;
}

.left-content {
  flex: 0 0 300px;
}

.sticky-element {
  position: sticky;
  top: 0;
  right: 0;
  width: 200px;
}

繰り返しますが、これはFF/Chromeでは機能しますが、Safariでは機能しません。すべてのブラウザで機能させるための回避策はありますか？または、マウスカーソルをスティッキー要素の上に置いてもスクロール機能を維持するために使用できる別のアプローチはありますか？

csssafarioverflowsticky
6
accelerate

私は他の誰かからこの解決策を得ました：

http://cssdeck.com/labs/bu0nx69w

基本的に、position:stickyの代わりに、右側のパネルにposition:fixedを使用します。重要なのは、親div（上記の例ではwill-change:transform）の.modal-contentでもあるため、position:fixedは、ビューポートではなく、その親を基準にして固定されます。それはきちんとした小さなトリックです

0
accelerate

私は今、サファリについてこれを実際にテストすることはできませんが、たとえば、スティッキーフッターを作成するとき、これは常に私にとって代替手段でした：

<!DOCTYPE html>
<html>
<head>
    <title>sticky side div</title>
    <style type="text/css">
        .maindiv{
            position: relative;
            display: inline-block;
            background-color: forestgreen;
            width: calc(100vw - 150px);
            height: 100%;
            overflow: auto;
        }
        .sidediv{
            position: fixed;
            display: inline-block;
            background-color: lightyellow;
            float: right;
            width: 100px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="maindiv">
        Lorem 45    
    </div>
    <div class="sidediv">
        Lorem 30
    </div>
    <div class="maindiv">
        Lorem 100
    </div>
    <div class="maindiv">
        Lorem 900
    </div>
</body>
</html>

適切なコンテンツの幅がわかったら、それにもう少しpxを追加してから、css calc functionを使用して、他のdivが流れ込まないようにします

また、Safari 7のvhとvwには既知のバグがあります。高さを設定することで修正できます。親がvh高さまたはvw幅を持つ#child要素を継承します

ただし、クロスブラウザサポートを希望しない場合は、CSS Gridsを使用することをお勧めします。

0
Bobby Axe