修复下拉菜单/工具提示等隐藏的溢出
发布于2024-11-07
浏览：704
您是否曾尝试为您的按钮创建一个下拉列表，然后选择但随后被溢出隐藏阻止？
然后你该怎么做，然后你使用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]删除
最新教程
更多>
-
如何在 JavaScript 中强制刷新网页并绕过缓存？使用 JavaScript 硬刷新当前页面强制 Web 浏览器通过 JavaScript 硬刷新页面可确保获取页面的全新副本并更新其所有外部资源。 为了实现这一点，JavaScript 提供了一个名为 location.reload(true) 的方法。当传递 true 值时，此方法指示浏览器绕过其...编程 发布于2024-11-08 -
什么是 PATH_INFO 以及它如何增强 PHP Web 应用程序？深入研究 PATH_INFO：揭示其在 PHP Web 应用程序中的作用在 Web 开发领域，PHP 是一个强大的工具，用于创建动态和交互式应用程序。它的全部功能之一是名为 PATH_INFO 的神秘变量。尽管经常被提及，但许多人仍然难以理解其确切作用。本文深入研究 PATH_INFO，阐明其目的、...编程 发布于2024-11-08
-
如何使用 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) { // Se...编程 发布于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 和 sette...编程 发布于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 '...编程 发布于2024-11-08
-
std::lock_guard 与 std::scoped_lock：何时选择哪个？考虑 std::lock_guard 与 std::scoped_lockC 17 标志着引入了一个新颖的锁类 std::scoped_lock ，它与古老的 std::lock_guard 有相似之处。本文深入探讨了这两种锁定机制之间的区别，指导您选择适合您特定需求的最佳工具。何时使用 std::...编程 发布于2024-11-08
学习中文
- 1 走路用中文怎么说？走路中文发音，走路中文学习
- 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
- 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
- 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
- 5 开车用中文怎么说？开车中文发音，开车中文学习
- 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
- 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
- 8 你好用中文怎么说？你好中文发音，你好中文学习
- 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
