修復下拉式選單/工具提示等隱藏的溢出

首頁 > 程式設計 > 修復下拉式選單/工具提示等隱藏的溢出

修復下拉式選單/工具提示等隱藏的溢出

發佈於2024-11-07

您是否曾嘗試為您的按鈕建立下拉列表，然後選擇但隨後被溢出隱藏阻止？

然後你該怎麼做，然後你使用javascript將元素丟到DOM的根目錄，然後根據觸發元素矩形定位元素，每次佈局更改時重新計算，發生滾動和調整視窗大小，不是很有效的。

首先我想說的是它還沒有完全支持，但現在有一個polyfill可以解決這個問題。

我們要依賴的兩個主要功能是

錨定位

Fixing the overflow hidden for dropdowns/tooltips etc

彈出視窗

Fixing the overflow hidden for dropdowns/tooltips etc

所以當我看到對話框被送到根但帶有 DOM 層時，我最初的想法就出現了。我偶然發現了 popover api，你基本上得到了相同的邏輯，但行為略有不同。

我還記得看到一篇關於將元素錨定到範圍滑桿上的拇指的帖子。

然後我想基本上你想對任何需要打破溢出隱藏的下拉選單/工具提示等做什麼，如果你混合兩者，你不需要所有過多的javascript。

所以這是支援它的瀏覽器中的工作演示

Chrome、Edge v125
Opera v111
Android 版 Chrome，Andriod 瀏覽器 v129

好吧，如果你今天想使用它怎麼辦。好吧，我們可以使用一個polyfill。

oddbird/css-anchor-positioning polyfill

它有很好的瀏覽器支援

火狐 54
Chrome 51
邊緣 79
Safari 10

嘗試存取非polyfill範例中未提及的瀏覽器，下面的範例有效，我親自測試了最新版本的safari和firefox

這意味著，在大多數瀏覽器中，我們將有額外的計算開銷，但當我們有足夠的兼容性時，它很容易使用和關閉。

這種方法有一個問題，那就是 polyfill 的大小約為 92kb，因此會對加載產生影響，但您可以在應用程式/網站完成任何重要操作後延遲加載它

版本聲明本文轉載於：https://dev.to/sp90/fixing-the-overflow-hidden-for-dropdownstooltips-etc-499?1如有侵犯，請聯絡[email protected]刪除

最新教學更多>

如何使用Regex在PHP中有效地提取括號內的文本
php：在括號內提取文本在處理括號內的文本時，找到最有效的解決方案是必不可少的。一種方法是利用PHP的字符串操作函數，如下所示：作為替代 $ text ='忽略除此之外的一切（text）'; preg_match（'＃（（。 &&& [Regex使用模式來搜索特...

程式設計發佈於2025-04-06
為什麼我在Silverlight Linq查詢中獲得“無法找到查詢模式的實現”錯誤？
查詢模式實現缺失：解決“無法找到”錯誤在Silverlight應用程序中，嘗試使用LINQ建立LINQ連接以錯誤而實現的數據庫”，無法找到查詢模式的實現。”當省略LINQ名稱空間或查詢類型缺少IEnumerable 實現時，通常會發生此錯誤。解決問題來驗證該類型的質量是至關重要的。在此特定實例...

程式設計發佈於2025-04-06
如何使用PHP將斑點（圖像）正確插入MySQL？
essue VALUES('$this->image_id','file_get_contents($tmp_image)')";This code builds a string in PHP, but the function call fil...

程式設計發佈於2025-04-06
為什麼使用固定定位時，為什麼具有100％網格板柱的網格超越身體？
網格超過身體，用100％grid-template-columns 為什麼在grid-template-colms中具有100％的顯示器，當位置設置為設置的位置時，grid-template-colly修復了？問題：考慮以下CSS和html： class =“ snippet-code”> ...

程式設計發佈於2025-04-06
如何將多種用戶類型（學生，老師和管理員）重定向到Firebase應用中的各自活動？
Red: How to Redirect Multiple User Types to Respective ActivitiesUnderstanding the ProblemIn a Firebase-based voting app with three distinct user type...

程式設計發佈於2025-04-06
如何限制動態大小的父元素中元素的滾動範圍？
在交互式接口中實現垂直滾動元素的CSS高度限制問題：考慮一個佈局，其中我們具有與用戶垂直滾動一起移動的可滾動地圖div，同時與固定的固定sidebar保持一致。但是，地圖的滾動無限期擴展，超過了視口的高度，阻止用戶訪問頁面頁腳。 $("#map").css({ margin...

程式設計發佈於2025-04-06
如何在php中使用捲髮發送原始帖子請求？
如何使用php 創建請求來發送原始帖子請求，開始使用curl_init（）開始初始化curl session。然後，配置以下選項： curlopt_url：請求 [要發送的原始數據指定內容類型，為原始的帖子請求指定身體的內容類型很重要。在這種情況下，它是文本/平原。要執行此操作，請使用包含以下標頭...

程式設計發佈於2025-04-06
在細胞編輯後，如何維護自定義的JTable細胞渲染？
在JTable中維護jtable單元格渲染後，在JTable中，在JTable中實現自定義單元格渲染和編輯功能可以增強用戶體驗。但是，至關重要的是要確保即使在編輯操作後也保留所需的格式。在設置用於格式化“價格”列的“價格”列，用戶遇到的數字格式丟失的“價格”列的“價格”之後，問題在設置自定義單元...

程式設計發佈於2025-04-06
為什麼Microsoft Visual C ++無法正確實現兩台模板的實例？
The Mystery of "Broken" Two-Phase Template Instantiation in Microsoft Visual C Problem Statement:Users commonly express concerns that Micro...

程式設計發佈於2025-04-06
為什麼我的CSS背景圖像出現？
故障排除：CSS背景圖像未出現，您的背景圖像儘管遵循教程說明，但您的背景圖像仍未加載。圖像和样式表位於相同的目錄中，但背景仍然是空白的白色帆布。而不是不棄用的，您已經使用了CSS樣式： bockent {背景：封閉圖像文件名：背景圖：url（nickcage.jpg）; 如果您的html，cs...

程式設計發佈於2025-04-06
Java是否允許多種返回類型：仔細研究通用方法？
在Java中的多個返回類型：一種誤解類型：在Java編程中揭示，在Java編程中，Peculiar方法簽名可能會出現，可能會出現，使開發人員陷入困境，使開發人員陷入困境。 getResult（string s）; ，其中foo是自定義類。該方法聲明似乎擁有兩種返回類型：列表和E。但這確實是如此嗎...

程式設計發佈於2025-04-06
如何從Python中的字符串中刪除表情符號：固定常見錯誤的初學者指南？
從python import codecs import codecs import codecs 導入 text = codecs.decode（'這狗\ u0001f602'.encode（'utf-8'），'utf-8'）印刷（文字）＃帶有...

程式設計發佈於2025-04-06
Android如何向PHP服務器發送POST數據？
在android apache httpclient（已棄用） httpclient httpclient = new defaulthttpclient（）; httppost httppost = new httppost（“ http://www.yoursite.com/script.p...

程式設計發佈於2025-04-06
$如何解決由於Android的內容安全策略而拒絕加載腳本... \”錯誤？$
如何解決由於Android的內容安全策略而拒絕加載腳本... \”錯誤？
Unveiling the Mystery: Content Security Policy Directive ErrorsEncountering the enigmatic error "Refused to load the script..." when deployi...

程式設計發佈於2025-04-06
如何有效地選擇熊貓數據框中的列？
在處理數據操作任務時，在Pandas DataFrames 中選擇列時，選擇特定列的必要條件是必要的。在Pandas中，選擇列的各種選項。選項1：使用列名如果已知列索引，請使用ILOC函數選擇它們。請注意，python索引基於零。 df1 = df.iloc [：，0：2]＃使用索引0和1 ...

程式設計發佈於2025-04-06