修復下拉式選單/工具提示等隱藏的溢出
發佈於2024-11-07
瀏覽：492
您是否曾嘗試為您的按鈕建立下拉列表，然後選擇但隨後被溢出隱藏阻止？
然後你該怎麼做，然後你使用javascript將元素丟到DOM的根目錄，然後根據觸發元素矩形定位元素，每次佈局更改時重新計算，發生滾動和調整視窗大小，不是很有效的。
首先我想說的是它還沒有完全支持，但現在有一個polyfill可以解決這個問題。
我們要依賴的兩個主要功能是
錨定位
彈出視窗
所以當我看到對話框被送到根但帶有 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]刪除
最新教學
更多>
-
如何使用 Connector .NET 檢索 MySQL 中的最後一個插入 ID？使用Connector .NET 在MySql 中檢索最後一個插入ID在MySql 中，最後一個插入ID 是指分配給新插入的標識符排。該值在某些情況下可能很有價值，例如填充外鍵關係。 最初，假設 MySqlHelper 類別的 ExecuteNonQuery 方法傳回最後一個插入 ID。然而，這個假...程式設計 發佈於2024-11-08 -
如何在 PHP 中使用 cURL 取得 API 回應？在PHP 中使用cURL 取得API 回應在PHP 中，您可以建立一個獨立的類，其中包含透過cURL 呼叫API的函數並獲得響應。以下是實現此目的的方法：class ApiRequest { public function getResponse($url) { // Set cURL ...程式設計 發佈於2024-11-08
-
Ansible 入門 - 初學者指南：日復一日的 DevOps 工具系列欢迎来到我们的“50 天 50 个 DevOps 工具”系列的第 30 天！今天，我们将探索 Ansible，它是 DevOps 工具包中最重要的工具之一。本博客将向您介绍 Ansible 的基础知识，分解其关键组件并向您展示如何从简单的示例开始。我们会让事情简单明了，使其成为初学者的完美起点。 ...程式設計 發佈於2024-11-08
-
折疊還是雙折？這是一個技術問題！我們現在不能停下來，因為我們已經投資了 1 倍，但多年來讓我們繼續投入 100 倍！斯托克斯！ JavaScript 範例 你可能以前聽說過，但 Javascript 是在 10 天內寫成的。它的採用率迅速增長，即使在使用該語言幾年後，他們也不想引入重大變化……所以，現在該語言已經...程式設計 發佈於2024-11-08
-
動態 Getter 和 Setter 如何增強 JavaScript 的靈活性？在 JavaScript 中實作動態 Getter 和 Setter：指南在傳統 JavaScript 中，getter 和 setter 是為特定屬性名稱定義的。但是，可以使用 ES2015 中引入的代理程式建立更靈活的動態 getter 和 setter。 使用代理的動態 getter 和 se...程式設計 發佈於2024-11-08
-
如何在 Go 中將類型變數傳遞給函數進行類型斷言？將類型變數傳遞給函數進行型別斷言您希望透過將型別傳遞給函式來執行型別斷言。本質上，您的目標是實現以下目標：// Note that this is pseudocode, because Type isn't valid here func myfunction(mystring string, m...程式設計 發佈於2024-11-08
-
從輸入欄位取得文字..Java代碼 public class MainActivity extends AppCompatActivity { Button btn; TextView textView; @Override protected void onCreate(Bundle s...程式設計 發佈於2024-11-08
-
為什麼 WinAPI Sleep(1) 會導致 15 毫秒暫停？了解WinAPI Sleep() 函數持續時間的差異當以1 毫秒為參數呼叫WinAPI Sleep() 函數時，據觀察，執行緒實際上暫停的時間要長得多，通常約為15 毫秒。這種現象引起了人們對潛在系統問題的擔憂。 Windows 中的時間量化Windows 採用時間量化機制進行執行緒調度。這意味著系...程式設計 發佈於2024-11-08
-
以下是一些符合條件的標題選項： * JavaScript 中的相對路徑與絕對路徑：何時使用哪一個？ * JavaScript 路徑：絕對路徑還是相對路徑？性能和安全指南。 * 瓦時澄清 JavaScript 中的相對路徑和絕對路徑相對路徑和絕對路徑是 Web 開發中的基本概念，理解它們的差異至關重要。 定義絕對路徑指定相對於根目錄的位置（例如，/images/kitten.png）。另一方面，相對路徑指定相對於目前工作目錄的位置（例如，kitten.png）。 效能注意事項相...程式設計 發佈於2024-11-08
-
如何處理 MySQL 查詢中的外鍵插入：兩種常見場景如何處理MySQL 查詢中的外鍵插入為了有效地將值插入到具有外鍵的表中，讓我們探討兩個常見的場景：場景1：新增學生和現有教師要將新學生連結到現有教師，請使用教師姓名檢索外鍵：INSERT INTO TAB_STUDENT(name_student, id_teacher_fk) SELECT 'Jo...程式設計 發佈於2024-11-08
-
std::lock_guard 與 std::scoped_lock：何時選擇哪一個？考慮std::lock_guard 與std::scoped_lockC 17 標誌著引入了一個新穎的鎖類std::scoped_lock ，它與古老的std::lock_guard 有相似之處。本文深入探討了這兩種鎖定機制之間的區別，引導您選擇適合您特定需求的最佳工具。 何時使用std::lock...程式設計 發佈於2024-11-08
-
如何使用 Java 和 Apache Tika 從 Zip 檔案中的檔案中提取內容？如何使用Java 和Apache Tika 從Zip 檔案中的檔案讀取和提取內容實作從Zip 檔案中讀取和提取內容的任務使用Java 和Apache Tika 壓縮zip 檔案中的檔案涉及幾個關鍵步驟。 1。初始化輸入首先從要處理的檔案建立輸入流：InputStream input = new Fi...程式設計 發佈於2024-11-08
-
當公式存在時，如何使用 Openpyxl 從 Excel 電子表格中檢索實際儲存格值？如何使用 Openpyxl 忽略公式並檢索實際單元格值使用包含公式的 Excel 電子表格時，檢索基礎單元格值可能具有挑戰性。 Openpyxl 是一個用於讀寫 Excel 檔案的熱門 Python 函式庫，可讓您存取儲存格值而無需計算公式結果。 問題：公式而不是實際值使用 Openpyxl 時的一...程式設計 發佈於2024-11-08
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
