固定位置时是否防止元素随页面滚动?

时间:2018-10-17 14:52:13

标签: javascript html css

是否可以使元素具有固定位置,但阻止其在页面上滚动?

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

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

因此,我需要将其放置在视口之外,而不要依赖最终包裹在哪个父对象中。因此,固定位置可以很好地工作。

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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

如果您将其设置为position: fixed,那么我知道让元素随着用户滚动而随页面其余部分移动的唯一方法是在浏览器滚动事件触发时使用JavaScript编辑位置。否则,如果您首先相对于视口定位,那么您将一直相对于视口定位。但是,挂接滚动事件并不一定能很好地执行操作,尽管有可用的防反跳功能可以帮助解决此问题,但这并不是我的首选。

但是,您可能可以使用position: absolute而不用缠结多余的页面包装器。是否有一个具有以下属性的元素(称为A):

  • 您的工具提示位于A内(或可以移动到那里)
  • 您可以相对于A正确定位工具提示
  • 多余的包装纸总是在A之外

如果是这样,请在元素A上设置position: relative。您的工具提示将使用A作为参考,而不使用A之外的多余包装器(即使该包装器上也设置了position: relative)。