如何用JavaScript检测HTML元素是否与浏览器底部相交？

明确需求：当元素底部超出浏览器视口底部时判定为相交，若元素设置bottom:0px（刚好贴合底部）则不算相交。

实现思路 #

• 获取元素布局信息：调用getBoundingClientRect()方法，该方法会返回元素相对于视口的位置与尺寸数据。
• 获取浏览器视口高度：使用window.innerHeight获取当前视口的有效高度。
• 判定相交条件：对比元素底部到视口顶部的距离（rect.bottom）与视口高度，若前者大于后者，说明元素底部超出视口底部，即判定为相交；若等于或小于，则不相交。

完整代码示例 #

HTML #

<div class="fixed"></div>

CSS #

.fixed{
  position:fixed;
  bottom:-10px;
  left:0px;
  width:300px;
  height:300px;
  background:blue;
  border:3px solid red;
}

JavaScript #

function isOverlappingBottom(element) {
  const rect = element.getBoundingClientRect();
  const viewportHeight = window.innerHeight;
  // 元素底部位置大于视口高度时，判定为与底部相交
  return rect.bottom > viewportHeight;
}

// 调用示例
const fixedDiv = document.querySelector('.fixed');
console.log(isOverlappingBottom(fixedDiv)); // bottom:-10px时返回true，bottom:0px时返回false

原理说明 #

• getBoundingClientRect().bottom：返回元素底部边缘到视口顶部的像素距离。
• window.innerHeight：返回浏览器视口的实际高度（不含工具栏等浏览器自身组件）。
• 当rect.bottom > viewportHeight时，元素底部已越过视口底部边界，即发生相交；若两者相等，说明元素刚好贴合视口底部，不符合相交判定条件。

内容的提问来源于stack exchange，提问作者yavgz