如何禁用滚动触发动画的反向播放效果？

1. 禁止向上滚动时动画反向播放 #

纯CSS难以完全避免动画反向触发，推荐用JavaScript监听滚动方向，仅在向下滚动时激活元素，且激活后保持显示状态：

• 监听滚动容器的滚动事件，记录上一次滚动位置判断方向
• 仅在向下滚动时检查元素是否进入可视范围，符合条件则添加激活类
• 通过CSS过渡实现平滑显示，激活类固定元素为完全可见状态

2. 优化sticky元素容器高度 #

使用CSS变量动态计算容器高度，确保滚动范围刚好覆盖所有元素的动画触发需求：

• 定义--sticky-height（sticky元素高度）、--animation-step（单个元素所需滚动距离）、--element-count（元素数量）
• 容器高度计算公式：calc(var(--sticky-height) + var(--animation-step) * var(--element-count))

修改后的完整代码 #

CSS #

:root {
  --sticky-height: 500px;
  --animation-step: 300px;
  --element-count: 3;
}

#container {
  width: 100%;
  height: 100%;
  background-color: red;
  position: relative;
}

#scroll-container-one {
  width: 1000px;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: green;
}

.box-one {
  height: 600px;
  background-color: purple;
  font-size: 32px;
}

.box-two {
  height: calc(var(--sticky-height) + var(--animation-step) * var(--element-count));
  position: relative;
  background-color: orange;
}

.inside-box {
  height: var(--sticky-height);
  position: sticky;
  top: 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
}

.inside-box div {
  width: 300px;
  height: 200px;
  background-color: blue;
  font-size: 40px;
  opacity: 0;
  transition: opacity 0.5s linear;
}

.inside-box div.active {
  opacity: 1;
}

.box-three {
  height: 1000px;
  background-color: yellow;
}

HTML #

<div id="container">
  <div id="scroll-container-one">
    <div class="box-one">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, assumenda quisquam. Minus culpa quo a esse nostrum, laborum aspernatur ipsa nisi cum blanditiis facilis, minima unde soluta quos, dolorum impedit!
    </div>
    <div class="box-two">
      <div class="inside-box">
        <div id="one">abooga</div>
        <div id="two">awooga</div>
        <div id="three">asooga</div>
      </div>
    </div>
    <div class="box-three">box 3</div>
  </div>
</div>

JavaScript #

const scrollContainer = document.getElementById('scroll-container-one');
const animatedItems = document.querySelectorAll('.inside-box div');
let lastScrollPos = 0;

scrollContainer.addEventListener('scroll', () => {
  const currentScroll = scrollContainer.scrollTop;
  // 跳过向上滚动的情况
  if (currentScroll <= lastScrollPos) {
    lastScrollPos = currentScroll;
    return;
  }

  animatedItems.forEach(item => {
    const itemOffset = item.getBoundingClientRect().top;
    const containerViewHeight = scrollContainer.clientHeight;
    // 元素进入可视范围时添加激活类
    if (itemOffset < containerViewHeight) {
      item.classList.add('active');
    }
  });

  lastScrollPos = currentScroll;
});

3. 参考效果网站 #

这类滚动逐显效果常见于以下场景：

• Apple 产品详情页（如Mac、iPhone系列页面）：滚动时产品特性模块逐步出现
• Airbnb 体验推荐页面：卡片元素随滚动依次加载显示
• 设计师个人作品集网站：用于展示作品案例，增强页面层次感

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