ボタンのドロップダウンを作成しようとして選択したことがありますが、オーバーフロー非表示によってブロックされてしまったことがありますか?

それではどうするかというと、JavaScript に手を伸ばして要素を DOM のルートにスローし、トリガー要素の四角形に基づいて要素を配置し、レイアウトが変更されるたびに再計算し、スクロールやウィンドウのサイズ変更が発生するが、あまりうまくいきません。効果的。

まだ完全にはサポートされていないということから始めたいと思いますが、今のところそれを解決するためのポリフィルがあります。

私たちが依存する 2 つの主な機能は

アンカーの位置決め

ポップオーバー

私の最初のアイデアは、ダイアログが DOM レイヤーを使用してルートに送信されるのを見たときに思いつきました。私はポップオーバー API に遭遇しました。基本的には同じロジックを取得しますが、動作が少し異なるだけです。

また、レンジ スライダーのつまみに要素を固定することに関する投稿を見た記憶があります。

それから、基本的に、この 2 つを混ぜ合わせた場合にオーバーフローの非表示を解除する必要があるドロップダウン/ツールチップなどに対して何をしたいのかを考えました。過剰な JavaScript は必要ありません。

これは、それをサポートするブラウザでの動作デモです

• Chrome、Edge v125
• オペラ v111
• Android 用 Chrome、Andriod ブラウザ v129

それでは、今日使いたい場合はどうすればよいですか。そうですね、使用できるポリフィルがあります。

oddbird/css-anchor-positioning ポリフィル

優れたブラウザサポートを備えています

• Firefox 54
• クローム 51
• エッジ 79
• サファリ 10

非ポリフィルの例で言及されていないブラウザにアクセスしてみてください。以下の例は機能します。私は個人的に safari と Firefox の最新バージョンをテストしました

これは、ほとんどのブラウザで余分な計算オーバーヘッドが発生することになりますが、十分な互換性がある場合は使いやすく、オフに切り替えることができることを意味します。

このアプローチには注意点が 1 つあります。それは、ポリフィルのサイズが約 92kb であるため、負荷に影響しますが、アプリケーション/ウェブサイトが重要なことを行った後に遅延ロードすることができるということです。