如何用JavaScript计算div的滚动百分比以实现元素动画？

要计算元素在视口中的可见百分比，核心是利用getBoundingClientRect()获取元素的位置信息，结合视口尺寸来计算可见区域占元素总高度的比例。以下是可直接复用的实现：

function getVisiblePercentage(element) {
  const rect = element.getBoundingClientRect();
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  
  // 元素完全在视口外（上方）
  if (rect.bottom <= 0) {
    return 0;
  }
  // 元素完全在视口外（下方）
  if (rect.top >= viewportHeight) {
    return 0;
  }

  // 计算元素可见的上下边界
  const visibleTop = Math.max(0, rect.top);
  const visibleBottom = Math.min(viewportHeight, rect.bottom);
  const visibleHeight = visibleBottom - visibleTop;

  // 返回可见比例（0到1之间，1表示完全可见）
  return visibleHeight / rect.height;
}

关键逻辑说明 #

• getBoundingClientRect()：返回元素相对于视口的位置和尺寸，包含top（元素顶部到视口顶部距离）、bottom（元素底部到视口顶部距离）、height（元素自身高度）等属性。
• 边界判断：先排除元素完全不可见的情况，直接返回0。
• 可见区域计算：取元素与视口的重叠部分高度，除以元素总高度，得到可见百分比的小数形式（乘以100可转为百分比）。

结合动画的使用示例 #

比如监听滚动事件，根据元素可见度改变其透明度：

const targetElement = document.getElementById('target-div');

window.addEventListener('scroll', () => {
  const visibleRatio = getVisiblePercentage(targetElement);
  // 根据可见比例设置动画，比如完全可见时透明度为1，不可见时为0.2
  targetElement.style.opacity = 0.2 + visibleRatio * 0.8;
});

这个方案能准确处理各种可见状态：元素完全进入视口时返回1.0，部分可见时返回对应比例，完全移出视口时返回0，完全符合滚动动画的需求。

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