位置固定时防止元素随页面滚动？答案

【问题标题】：Prevent element from scrolling with page when position is fixed?位置固定时防止元素随页面滚动？
【发布时间】：2019-03-22 07:17:45
【问题描述】：

是否可以使元素具有固定位置，但阻止它随页面滚动？

我的问题：我正在构建一个工具提示，我根据页面上可用的空间来动态确定放置位置。它需要在其目标元素旁边的所有其他内容上弹出，并且不占用空间。所以我最初认为位置是绝对的。

但是绝对位置是基于元素的父包装。我的页面被包装在多个我无法控制的包装器中（在 Salesforce 上，但这不一定是 Salesforce 特定的问题）。

所以我需要将它定位在视口之外，而不是依赖于它最终被包裹在哪个父级中。所以位置固定，效果很好。

唯一的问题是位置固定使元素随页面滚动。我真的不希望工具提示在用户滚动时跟随用户。

由于无法控制父包装器，我觉得我需要根据视口保持位置。但我发现的只是位置固定，所以不确定是否存在阻止元素随页面滚动的方法。

【问题讨论】：

从父母中删除 postion:relative; 并将其添加到正文中。这将帮助您在视口上添加工具提示。
我无法联系到将被包裹的父母。
如果您发布一些代码以更好地理解您的问题，那就太好了；如果你不能然后发布正在发生的事情的 gif 图像（问题）..
有多个库，例如 'PopperJS' 和 'Tippy' 实现了这一点。基本上，他们将工具提示附加到正文，并根据调用它的目标元素计算位置。你也可以通过它们。
好吧，position:fixed 实际上意味着它不应该随着页面滚动（就像这个页面上的标题）......无论如何，你可以监听滚动事件并将工具提示隐藏在那一点。不确定我是否见过用户滚动时没有关闭的工具提示。

标签： javascript html css

【解决方案1】：

似乎您想使用position: absolute; 而不是固定的。

【讨论】：

不一定是由于我在问题中概述的问题。绝对位置意味着工具提示现在将基于其父级定位（顶部，左侧 css 属性将基于父级原点）。这实际上不适用于工具提示，因为我需要知道它是否适合实际视口，所以我需要基于整个视口的位置。
@TylerDahle 您可以使用绝对位置，然后分析工具提示与视口相关的位置，如有必要 - 使用margin移动它

【解决方案2】：

如果您设置为position: fixed，我知道在用户滚动时让元素随页面其余部分一起移动的唯一方法是在浏览器滚动事件触发时使用 JavaScript 编辑位置。否则，如果您首先相对于视口定位，您将持续相对于视口定位。然而，挂钩到滚动事件并不一定能很好地执行，虽然有可用的去抖动功能来帮助解决这个问题，但它不是我的首选。

不过，您也许可以使用position: absolute 而不会与额外的页面包装器纠缠不清。是否存在具有这些属性的元素（称为 A）：

您的工具提示位于 A 内（或可以移动到那里）
您可以相对于 A 正确定位工具提示
额外的包装总是在 A 之外

如果是这样，请在元素 A 上设置 position: relative。您的工具提示将使用 A 作为参考，而不是在 A 之外的额外包装器（即使该包装器上还设置了 position: relative）。

【讨论】：