Haben Sie schon einmal versucht, ein Dropdown-Menü für Ihre Schaltfläche zu erstellen, diese auszuwählen, aber dann durch den ausgeblendeten Überlauf blockiert zu werden?

Was machen Sie dann? Nun, dann greifen Sie nach Javascript, um das Element in die Wurzel des DOM zu werfen, und positionieren das Element dann basierend auf den Triggerelementen rect. Bei jeder Änderung des Layouts, beim Scrollen oder bei der Größenänderung des Fensters wird eine Neuberechnung vorgenommen, nicht sehr wirksam.

Ich möchte zunächst sagen, dass es noch keine vollständige Unterstützung gibt, aber es gibt ein Polyfill, um das vorerst zu lösen.

Die beiden Hauptfunktionen, auf die wir uns verlassen werden, sind

Ankerpositionierung

Popovers

Meine erste Idee kam mir also, als ich sah, dass die Dialoge an das Stammverzeichnis gesendet wurden, aber mit der DOM-Ebene. Ich bin über die Popover-API gestolpert, bei der man im Grunde die gleiche Logik erhält, sich aber nur etwas anders verhält.

Ich erinnere mich auch daran, einen Beitrag über die Verankerung eines Elements an einem Daumen auf einem Bereichsschieberegler gesehen zu haben.

Dann dachte ich im Grunde, was Sie für Dropdowns/Tooltips usw. tun möchten, die den versteckten Überlauf unterbrechen müssen. Wenn Sie die beiden mischen, brauchen Sie nicht all das übermäßige Javascript.

Hier ist also eine funktionierende Demo in den Browsern, die es unterstützen

• Chrome, Edge v125
• Opera v111
• Chrome für Andriod, Andriod-Browser v129

Okay, was ist, wenn Sie es heute verwenden möchten? Nun, dafür gibt es eine Polyfüllung, die wir verwenden können.

Die Oddbird/CSS-Anker-Positionierungs-Polyfüllung

Das bietet großartige Browserunterstützung

• Firefox 54
• Chrome 51
• Kante 79
• Safari 10

Versuchen Sie, einen Browser zu besuchen, der im Nicht-Polyfill-Beispiel nicht erwähnt wird, und dieses Beispiel unten funktioniert. Ich habe persönlich die neuesten Versionen von Safari und Firefox getestet

Das bedeutet, dass wir in den meisten Browsern zwar den zusätzlichen Rechenaufwand haben, aber es ist einfach zu verwenden und auszuschalten, wenn wir über ausreichende Kompatibilität verfügen.

Es gibt einen Nachteil bei diesem Ansatz: Das Polyfill hat eine Größe von ca. 92 KB, was sich auf die Auslastung auswirkt. Sie können es jedoch verzögert laden, nachdem die Anwendung/Website fertig ist und irgendetwas Wichtiges erledigt hat.