使用Intersection Observer与scrollTop判断向上滚动时div滚动占比

核心问题点 #

1. previousScrollTop未初始化：第一次执行handleScroll时，该变量为undefined，导致滚动方向判断逻辑失效，甚至引发静默错误。
2. 目标div无滚动触发条件：.mountain-sect未设置overflow: auto/scroll，且内容高度未超过容器高度，根本不会触发内部scroll事件。
3. 监听对象不符合需求：你需要的是页面滚动到该div区域时判断方向，但当前代码监听的是div内部滚动，而非页面全局滚动。

修复后的代码（适配页面滚动场景） #

HTML（调整高度确保页面可滚动）

<div class="container">
  <div style="position: relative; height: 100vh;"><img src="https://placehold.co/600x400" /></div>
  <div class="mountain-sect" style="position: relative; height: 100vh;"><img src="https://placehold.co/600x400" /></div>
  <div style="position: relative; height: 100vh;"><img src="https://placehold.co/600x400" /></div>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const section = document.querySelector('.mountain-sect');
  let previousScrollTop = window.scrollY; // 初始化页面滚动位置

  function handleScroll() {
    const currentScrollTop = window.scrollY;
    // 正确判断滚动方向
    const scrollDirection = currentScrollTop > previousScrollTop ? 'down' : 'up';
    console.log('滚动方向:', scrollDirection);

    // 判断当前div是否在视口中
    const rect = section.getBoundingClientRect();
    const isInView = rect.top <= window.innerHeight && rect.bottom >= 0;

    if (isInView) {
      // 计算页面滚动时，div被滚动过的比例（以视口为基准）
      const sectionHeight = rect.height;
      const scrollPercentage = ((window.innerHeight - rect.top) / sectionHeight) * 100;

      // 触发条件：向上滚动且已滚动过div的50%位置
      if (scrollDirection === 'up' && scrollPercentage > 50) {
        console.log('满足触发条件：向上滚动且过div50%');
        // 这里执行你的淡出动画逻辑
        // section.classList.add('your-fade-out-class');
      }
    }

    // 更新滚动位置记录
    previousScrollTop = currentScrollTop;
  }

  // 监听页面全局滚动事件
  window.addEventListener('scroll', handleScroll);
});

若需适配div内部滚动场景 #

如果你的需求是div自身内部滚动时触发动画，只需修改以下两点：

1. 给.mountain-sect添加滚动样式：

.mountain-sect {
  height: 300px; /* 设置固定高度 */
  overflow: auto; /* 允许内部滚动 */
}

2. 调整JS中的滚动监听与初始化：

// 初始化div内部滚动位置
let previousScrollTop = section.scrollTop;

// 监听div内部滚动
section.addEventListener('scroll', handleScroll);

// 在handleScroll中使用div自身的scrollTop
const scrollTop = section.scrollTop;

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