【解決方法】 Overflow-y は、ドロップダウン コンテンツを遮断します。 オーバーフローで表示するにはどうすればよいですか?

プログラミングQA

[ad_1]

div内にドロップダウンがあります。
div には、スクロールするように設定された overscroll プロパティがあります。
問題は、ドロップダウン要素が切り取られることです。 オーバーフローを適用しない場合、ドロップダウン要素は期待どおりに表示されます。

PS divの高さを変更することはできません。 高さを変えずにこれを達成しなければなりません。

これが私が望む方法です:
AutoDraw[^]

これは私が得ているものです:

AutoDraw[^]

私が試したこと:

<div style="overflow-y: scroll; height: 427px">
// dropdown inside 
</div>

解決策 1

それまで ポップオーバー API[^] すべての主要なブラウザーで採用されていますが、これはまだかなり先のことです。要素は、最も近い先祖の境界を逃れることはできません。 ブロック整形コンテキスト[^].

カスタムの「ドロップダウン」要素を要素の外側に表示する場合は、 overflow-y:scroll マークアップまたは Javascript を使用して、ドロップダウン要素をオーバーフロー要素の外に移動する必要があります。

(あなたは ポップオーバー ポリフィル[^] 図書館; ただし、特定のケースに合わせて特定のスクリプトを作成する方が、ほぼ確実に簡単です。)

[ad_2]

コメント

タイトルとURLをコピーしました