时间戳

首页 > 解决方案 > 当 postion:relative 阻止它时，如何相对于身体使用 offsetTop？

javascript - 当 postion:relative 阻止它时，如何相对于身体使用 offsetTop？

问题描述

所以我知道如果没有定位的祖先， .offsetTop 是从元素的顶部开始测量的。

我试图在元素用 JavaScript 显示一半时滑入。

因此，Javascript 代码计算图像距离窗口顶部的距离，如果图像显示一半，则将 CSS 类应用于元素。

但是，由于图像的父元素（页脚）设置为 position:relative，因此 offsetTop 不再起作用。

代码看起来像这样

const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
const imageBottom = sliderImage.offsetTop + sliderImage.height;   
const isHalfShown = slideInAt > sliderImage.offsetTop;   
const isNotScrolledPast = window.scrollY < imageBottom;  

if (isHalfShown && isNotScrolledPast) {
  sliderImage.classList.add('active');
} else {
  sliderImage.classList.remove('active');
}

这是现实生活中的例子：https ://bluishbanana.github.io/

任何想法如何解决这个问题？

标签： javascript

解决方案

这里有两个选项。offsetTop首先，也是最直接的，因为您提到的确切原因而摆脱了：它适用于相对偏移量，因此在滚动父级时也没有真正的帮助。要获取绝对数字，请使用getBoundingClientRect()：

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

这种方法的缺点是它的性能：即使您将此函数作为滚动处理程序去抖动，在每次滚动时运行包装器仍然不是理想的。

另一种方法是使用IntersectionObserver API，它在 2021 年或多或少有足够的浏览器支持：

可用于了解 DOM 元素相对于包含元素或顶级视口的可见性和位置的 API。位置是异步传递的，对于理解元素的可见性和实现 DOM 内容的预加载和延迟加载很有用。

使用这种方法，您不必对处理程序进行去抖动，因此应该提高性能并且还应该修复不那么微妙的错误。

推荐阅读