如何基于滚动通过JavaScript控制文本透明度？

你的当前实现通过监听scroll事件计算元素位置控制透明度，虽能实现效果，但scroll事件触发频繁，在性能敏感场景下易造成卡顿。更优方案是用Intersection Observer API——浏览器原生异步API，专门监听元素与视口的交叉状态，性能更优、代码更简洁。

核心思路 #

1. 为两个渐显元素分别配置交叉观察器，定义触发渐变的视口范围
2. 直接利用元素的交叉比例（intersectionRatio）计算透明度，无需手动处理滚动位置
3. 保留CSS过渡实现平滑的透明度变化

完整实现代码 #

HTML（无需修改） #

<div class="above-divs">
  <a href="">hello</a>
</div>

<div class="message">
  <span>Text1 (span1)</span>
  <div class="vh">
    <span>Text2 (span2)</span>
  </div>
</div>

CSS（仅保留必要样式） #

.above-divs a{
  font-size:10rem;
  background-color: black;
  color: white;
}

.message {
  width: 100%;
  height: 150vh;
  display: flex;
  position: relative;
  background-color: rgb(0, 0, 0);
  align-items: center;
}

.message span {
  font-size: 10vw;
  color: rgb(255, 255, 255);
}

.message>span {
  position: sticky;
  top: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vh {
  position: absolute;
  bottom: 0;
  right: 10%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

JavaScript（替换原scroll监听代码） #

// span1的观察配置：对应原30%-60%视口范围触发渐变
const observerOptions1 = {
  root: null, // 以视口为根容器
  rootMargin: '-30% 0 -40% 0', // 上偏移30%、下偏移40%，限定触发范围
  threshold: Array.from({length: 101}, (_, i) => i / 100) // 0-1全阈值，保证渐变平滑
};

// span2的观察配置：对应原50%-90%视口范围触发渐变
const observerOptions2 = {
  root: null,
  rootMargin: '-50% 0 -10% 0', // 上偏移50%、下偏移10%
  threshold: Array.from({length: 101}, (_, i) => i / 100)
};

// 交叉状态变化回调
const handleIntersection = (entries) => {
  entries.forEach(entry => {
    // 交叉比例直接映射为透明度，限定在0-1区间
    entry.target.style.opacity = Math.min(Math.max(entry.intersectionRatio, 0), 1);
  });
};

// 创建观察器并绑定目标元素
const observer1 = new IntersectionObserver(handleIntersection, observerOptions1);
const observer2 = new IntersectionObserver(handleIntersection, observerOptions2);

observer1.observe(document.querySelector('.message > span'));
observer2.observe(document.querySelector('.vh'));

方案优势 #

• 性能更优：浏览器原生异步处理，不会在滚动时频繁占用主线程，避免卡顿
• 代码简洁：无需手动计算元素位置、透明度逻辑，直接通过交叉比例控制
• 易维护：修改渐显范围只需调整rootMargin参数，逻辑清晰直观

内容的提问来源于stack exchange，提问作者Thor The dog