Lassen Sie mich die Bühne etwas bereiten.
Sie haben eine Website und, wie die meisten, scrollt sie.
Diese Website wird Modals haben. Wahrscheinlich werden Sie das Modal mit position: fixed positionieren, damit es unabhängig vom Scrollen vorhersehbar positioniert ist. Es ist möglich, dass das Modal selbst scrollt.
Beachten Sie, dass das Modal einen Schließen-Button hat. Wir können diesen in der oberen rechten Ecke mit position: absolute positionieren, aber wenn unser Modal scrollt, ist das ein Problem.
Sollte das nicht eine Aufgabe für mehr position: fixed sein, richtig? Nicht wirklich, leider, da es keinen lokalen Kontext für position: fixed gibt.
Nun… eigentlich gibt es das (seltsamerweise) irgendwie. Wenn das Modal eine CSS-Transformation hat (und es könnte bereits eine haben, wenn Sie es mit dem alten left: 50%; transform: translateX(-50%); Trick zentrieren), dann wird der Schließen-Button mit fester Position nach Hause kommen.
Aber… da die Transformation geholfen hat, den Schließen-Button wieder an seinen Platz zu ziehen, sehen Sie, dass er sich wie position: absolute und nicht wie position: fixed verhält. ¯\_(ツ)_/¯
Es gibt hier jedoch eine Möglichkeit. Die Idee ist, dass position: sticky in gewissem Sinne eine lokal begrenzte position: fixed ist. Wenn wir den Schließen-Button sowieso bei top: 0 positionieren, bleibt er dort haften, wenn das Modal nach unten scrollt.
Ich fand diese Möglichkeit einfach interessant. Letztendlich, um ehrlich zu sein, wenn ich Modals hätte, bei denen ich mir Sorgen um das Scrollen mache, würde ich wahrscheinlich einen .modal-header Container und einen .modal-content Container haben. Der Header würde immer oben sitzen und der Container wäre das Ding, das scrollen könnte.
Schnelles und schmutziges Codepen-Beispiel hier https://codepen.io/ashconnolly/pen/wmrNJK
Das ist eine wirklich interessante Lösung für dieses Problem. Ich habe tatsächlich bemerkt, dass es mich manchmal im CodePen-Assets-Panel gestört hat und wollte es erwähnen, aber mir wurde klar, dass ich keine Lösungen anbieten konnte. Das wäre eine tolle Änderung!
Was ist mit dem vollständigen Verzicht auf den Schließen-Button?
Man könnte einen "falschen" Schließen-Button an der oberen rechten Seite des Overlay-Elements platzieren, aber schließlich, wenn das Klicken außerhalb des Modals (auf das Overlay-Element) es schließt, warum sich überhaupt mit einem Schließen-Button abmühen? Vielleicht aus Gründen der Barrierefreiheit?
Ich frage nur.
Danke, das wird nützlich sein. :)
Ich habe früher versucht, Auto-Positionen zu verwenden, um denselben Effekt zu erzielen, aber das ist in IE11 und Edge ziemlich fehlerhaft.
Die position:sticky-Lösung sieht nach einer viel schickeren Möglichkeit aus, dies zu tun.