Avez-vous déjà essayé de créer une liste déroulante pour votre bouton, sélectionnez-le, mais avez-vous ensuite été bloqué par un débordement masqué ?

Alors que faites-vous, eh bien, vous utilisez javascript pour lancer l'élément à la racine du DOM, puis positionnez l'élément en fonction des éléments déclencheurs rect, en recalculant à chaque fois que la disposition change, le défilement et le redimensionnement de la fenêtre se produisent, pas très efficace.

Je veux commencer par dire qu'il n'est pas encore entièrement pris en charge, mais il existe un polyfill pour résoudre ce problème pour le moment.

Les deux fonctionnalités principales sur lesquelles nous allons nous appuyer sont

positionnement de l'ancre

popovers

Mon idée initiale est donc venue lorsque j'ai vu que les boîtes de dialogue étaient envoyées à la racine mais avec la couche DOM. Je suis tombé sur l'API popover où vous obtenez fondamentalement la même logique mais agit juste légèrement différemment.

Je me souviens également d'avoir vu un article sur l'ancrage d'un élément à un pouce sur un curseur de plage.

Ensuite, j'ai pensé essentiellement à ce que vous vouliez faire pour toute liste déroulante/info-bulle, etc. qui doit masquer le débordement si vous mélangez les deux, vous n'avez pas besoin de tout le javascript excessif.

Voici donc une démo fonctionnelle dans les navigateurs qui la supportent

• Chrome, Edge v125
• Opéra v111
• Chrome pour Andriod, navigateur Andriod v129

D'accord, et si vous voulez l'utiliser aujourd'hui. Eh bien, il existe un polyfill pour cela que nous pouvons utiliser.

Le polyfill de positionnement d'ancre oddbird/css

Qui offre une excellente prise en charge du navigateur

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

Essayez de visiter un navigateur non mentionné dans l'exemple non polyfill et cet exemple ci-dessous fonctionne, j'ai personnellement testé les dernières versions de Safari et Firefox

Cela signifie que oui, dans la plupart des navigateurs, nous aurons une surcharge calculée supplémentaire, mais c'est facile à utiliser et à désactiver lorsque nous avons une compatibilité suffisante.

Il y a un inconvénient à cette approche, à savoir que le polyfill a une taille d'environ 92 Ko, ce qui aura un impact sur la charge, mais vous pouvez le charger paresseux une fois que l'application/le site Web a terminé de faire quelque chose d'important