it-swarm.com.de

Safariposition: klebrig funktioniert nicht in einem Überlauf: Autoelement

Gemäß CanIUse gibt es ein bekanntes Problem mit Safari und position:sticky innerhalb eines overflow:auto-Elements:

Ein Elternteil, dessen Überlauf auf automatisch gesetzt ist, verhindert, dass position: sticky in Safari funktioniert

Dies ist jedoch genau der Anwendungsfall, den ich brauche. Ich habe ein scrollbares div, das in zwei Spalten unterteilt ist. Die rechte Spalte sollte klebrig sein und sich niemals bewegen, selbst wenn das gesamte div gescrollt wird. Der Grund, warum ich position:sticky in der rechten Spalte verwende, ist, dass ich möchte, dass der Benutzer in der Lage ist, die linke Spalte mit dem Cursor in der rechten Spalte zu scrollen. Und dies war die einzige Lösung, die ich gefunden habe.

Ein funktionierendes Beispiel für Firefox/Chrome ist hier: http://cssdeck.com/labs/zfiuz4pc Der orangefarbene Bereich bleibt beim Scrollen fest, in Safari jedoch nicht .

Das obige Beispiel enthält einige unnötige Wrapper für mein Problem, aber ich wollte die Umgebung, in der ich diesen Code verwenden möchte, so genau wie möglich replizieren. Der grundlegende Aspekt besteht darin, dass ich Folgendes habe:

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

Und das 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;
}

Auch dies funktioniert in FF/Chrome, aber nicht in Safari. Gibt es eine Problemumgehung, damit es in allen Browsern funktioniert? Oder gibt es einen anderen Ansatz, den ich verwenden kann, um die Bildlauffähigkeit selbst mit dem Mauszeiger über dem klebrigen Element aufrechtzuerhalten?

2
accelerate

Ich habe diese Lösung von jemand anderem bekommen:

http://cssdeck.com/labs/bu0nx69w

Verwenden Sie im Allgemeinen anstelle von position:stickyposition:fixed für den rechten Bereich. Der Schlüssel ist auch für Sie will-change:transform in einem übergeordneten div (im obigen Beispiel in .modal-content), sodass position:fixed relativ zu diesem übergeordneten Objekt festgelegt wird und nicht zum Ansichtsfenster. Es ist ein netter kleiner Trick

0
accelerate

ich kann das momentan nicht wirklich auf Safari testen, aber dies war immer eine Alternative für mich, wenn Sie zum Beispiel eine klebrige Fußzeile erstellen:

<!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>

sobald Sie wissen, wie breit Ihr rechter Inhalt ist, fügen Sie ein wenig mehr px hinzu. Verwenden Sie dann css calc function, um sicherzustellen, dass die anderen Divs nicht in diesen hineinfließen 

es gibt auch einen bekannten Fehler mit vh und vw in Safari 7. Sie können den Fehler beheben, indem Sie height festlegen: erben Sie die #child -Elemente, deren Eltern vh-Höhen oder vw-Breiten haben

aber meine beste Empfehlung, wenn Sie sich nicht für die Cross-Browser-Unterstützung entschieden haben, ist die Verwendung von CSS Grids.

0
Bobby Axe