Warum ist `overflow:hidden` verhindern `position:sticky` arbeiten?

Wird im folgenden Codeausschnitt gezeigt, es gibt einen sticky div positioniert innerhalb eines Containers. Es klebt an der Spitze der Bedienfeld mit Bildlauf während des Aufenthalts in seinem container die ganze Zeit. Dies ist das gleiche Verhalten wie die UITableView Header auf iOS -, wo die überschriften bleiben sichtbar, bis der nächste header wird an der Spitze.

In der zweiten Ausschnitt, alles ist das gleiche, außer, dass der container hat eine overflow:hidden CSS-Regel. Dies scheint zu verhindern, dass die position:sticky Verhalten nicht richtig funktionieren.

CSS:

.parent {
  position: relative;
  background: #ccc;
  width: 500px;
  height: 150px;
  overflow: auto;
  margin-bottom: 20px;
}

.hidden-overflow {
  overflow: hidden;
}

.sticky {
  position: sticky;
  background: #333;
  text-align: center;
  color: #fff;
  top: 10px;
}

HTML:

<div class="parent">
  <div>
    <div class="sticky">
      Hi, I am a sticky inside the container which contains the first paragraph.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat
    nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
  </p>
  <p>
    Integer congue augue a quam tincidunt, vitae dictum sem iaculis. Proin feugiat nibh vitae leo facilisis, eget laoreet augue dictum. Nunc facilisis tempor feugiat. Aenean eget interdum diam. Maecenas non risus iaculis, scelerisque ipsum eu, facilisis urna.
    Integer velit justo, vestibulum vel vulputate vel, bibendum eu lorem. Phasellus viverra nisl a mi pretium eleifend.
  </p>
</div>
<div class="parent">
  <div class="hidden-overflow">
    <div class="sticky">
      Hi, I am another sticky in the container which contains the first paragraph, but my container has overflow:hidden.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus eget massa ultricies fermentum. Donec cursus magna eu congue posuere. Sed eget ligula quam. Sed laoreet enim sapien, eget volutpat
    nisl pellentesque vel. Nulla id dolor sed dolor sodales tristique. Curabitur feugiat massa sed massa bibendum semper et ac orci. In imperdiet nibh quis iaculis viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Quisque vestibulum, nunc non volutpat tristique, nisl nisi volutpat nibh, quis pulvinar purus ex nec justo. Sed a cursus turpis. Quisque nulla odio, lacinia quis vestibulum sit amet, elementum laoreet nisi. Etiam aliquet ligula sagittis,
    consectetur ipsum sit amet, sodales augue.
  </p>
  <p>
    Integer congue augue a quam tincidunt, vitae dictum sem iaculis. Proin feugiat nibh vitae leo facilisis, eget laoreet augue dictum. Nunc facilisis tempor feugiat. Aenean eget interdum diam. Maecenas non risus iaculis, scelerisque ipsum eu, facilisis urna.
    Integer velit justo, vestibulum vel vulputate vel, bibendum eu lorem. Phasellus viverra nisl a mi pretium eleifend.
  </p>
</div>

_{(Snippet angepasst von @Daniel hier)}

Warum nicht position:sticky Arbeit in einem Behälter mit overflow:hidden?

Vielleicht browser-Problem als position: sticky ist experimentell
sticky ist experimentell und es hat noch viele bugs(Browser). Denken Sie daran, dass Es nicht in der Produktion verwendet werden code.

InformationsquelleAutor cheeesus | 2017-05-11

css css-position

38

overflow: hidden ist nicht zu verhindern position: sticky von der Arbeit. Aber wenn Sie overflow zu hidden auf Vorfahren Ihre klebrige element, dann wird dieses Vorgänger-element wird die Scroll-container für Ihre sticky-element. Wenn Sie schalten Sie die overflow Wert auf Ihre Vorfahren, von hidden zu scroll und scrollen diese Vorfahren (nicht die Fenster), dann kann man sehen, dass die klebrige noch funktioniert.

Siehe auch https://github.com/wilddeer/stickyfill#pro-tips:

Alle nicht-Standard-Wert (nicht sichtbar) für overflow, overflow-x, oder
overflow-y auf einem der Vorgänger-Elemente Anker den sticky zu
der überlauf Kontext der Vorgänger. Einfach gesagt, scrolling
der Vorgänger wird die Ursache der klebrigen halten, scrollen Sie das Fenster
nicht. Dies wird voraussichtlich mit overflow: auto und overflow: scroll,
aber führt oft zu Problemen und Verwirrung mit overflow: hidden.

Oder http://www.coreyford.name/files/position-sticky-presentation/:

Im Feld position hängt von seinem enthaltenden block (hergestellt wie für
position:static) sowie seine scrollen container, definiert durch die
Nächster Vorgänger in der gleichen Dokument mit einem berechneten Wert für
'overflow-x "oder" overflow-y", die nicht 'sichtbar', oder, wenn der viewport
keine solchen Vorfahren gibt.

Oder die CSS-positioniertes Layout von Modul-Level 3
W3C Working Draft:

Einen stickily positionierte box wird ähnlich positioniert, um eine relativ
positionierte box, aber der offset wird berechnet mit Bezug auf die
Nächster Vorgänger mit einem Scroll-Feld oder die viewport-wenn es keinen übergeordneten
hat eine Scroll-box.
- Ich sollte darauf hinweisen, dass sticky mit Vorfahren overflow aus hidden zu scroll funktioniert nur, wenn die Höhe der übergeordneten container festgelegt ist, in welchem Fall würden Sie in der Lage, um zu Blättern der container, nicht das Fenster.
InformationsquelleAutor chaenu
1

Ich bin nicht sicher, dass dies in allen Fällen funktionieren, aber ich habe laufen gegen dieses und war in der Lage zu bekommen, um das Problem durch den Austausch overflow: hidden; mit clip-Pfade.
```
.parent {
    /*overflow: hidden; removed */
    position: absolute; /*this is required for clip-paths to work*/
    -webkit-clip-path: inset(0); /* safari*/
    clip-path: inset(0);
    clip: rect(0px, auto, auto, 0px); /* IE11/Edge (not that IE11 supports sticky anyway!) */
}
```
Soweit dass Sie position absolute, das einwickeln der overflow:hidden-element in einer anderen position: relative element und dann Zugabe oben, unten, Links und rechts: 0; sollte es füllen Sie den übergeordneten container.

InformationsquelleAutor marmite
-3

Laut Mozilla ( hier der link )

Sticky ist eine experimentelle API und sollte nicht verwendet werden in der Produktion von code.

Also für mich, dies allein ist der Grund, warum es nicht funktioniert. Sowohl Edge und IE 11 dont support es entweder so für mich, sowas mit javascript wäre der Weg nach vorne, es gibt viel da draußen, dass sollte helfen.

Als Beispiel sei an dieser hier

Hoffe, das hilft.
- Danke. Ich bin mir bewusst, das feature ist experimentell. Jedoch arbeite ich an einem proof-of-concept für die neue CSS-Funktionen, so ist dies kein Problem für mich. Ich sah dieses Verhalten in Firefox und Chrome, so dass ich dachte, es ist kein bug, sondern das erwartete Verhalten. Jedoch, deine Antwort und die Kommentare legen nahe, es ist in der Tat ein bug.
- Edge 16 unterstützt position: sticky
- Cool, ich denke immer noch, JS wäre der beste Weg vorwärts für jetzt, aber es wird interessant sein, in ein paar Jahren, als die Browser unterstützen diesen neuen, mehr CSS-Funktionen.
InformationsquelleAutor Sanspoof

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.