如何实现网页滚动时切换显示/隐藏div或图片的交互效果

这个交互逻辑实现门槛很低，核心是通过滚动事件监听+防抖判断滚动状态，支持灵活自定义正反显示隐藏规则，完全可以实现滚动时播放动效、停止时回到静止状态的效果。

核心逻辑 #

• 监听页面/滚动容器的scroll事件，事件触发时立刻执行「滚动中」对应的状态逻辑（显示指定元素、触发行走动效等）
• 增加防抖定时器，若连续指定时长内没有新的滚动事件触发，就判定为滚动停止，执行「静止状态」对应的逻辑（隐藏元素、切回静帧等）
• 把两个状态的执行逻辑抽为可配置项，就能自由切换规则：既可以设置滚动显示/停止隐藏，也可以反向设置滚动隐藏/停止显示。

可直接运行的代码示例 #

基于你给出的CSS和HTML结构，补充JS逻辑即可实现「未滚动显示红块、滚动中显示绿块」的效果：

.square {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
}

.green {
  background: green;
  display: none;
}

.red {
  background: red;
}

.container {
  width: 100%;
  height: 3000px;
}

<div class="container">
  <div class="square green"></div>
  <div class="square red"></div>
</div>

// 获取目标元素
const greenBlock = document.querySelector('.green')
const redBlock = document.querySelector('.red')
// 防抖定时器标记
let scrollTimer = null

// 可自定义的规则配置
const scrollConfig = {
  // 滚动停止判定阈值，单位ms，可根据流畅度需求调整
  stopJudgeDelay: 150,
  // 滚动中触发的逻辑
  whenScrolling: () => {
    greenBlock.style.display = 'block'
    redBlock.style.display = 'none'
    // 如果是角色动效，这里可以添加行走动画类：character.classList.add('walking')
  },
  // 滚动停止触发的逻辑
  whenScrollStop: () => {
    greenBlock.style.display = 'none'
    redBlock.style.display = 'block'
    // 如果是角色动效，这里可以移除行走动画类，切回站立静帧：character.classList.remove('walking')
  }
}

// 绑定滚动监听
window.addEventListener('scroll', () => {
  // 每次触发滚动先清除之前的停止定时器
  clearTimeout(scrollTimer)
  // 立即执行滚动中逻辑
  scrollConfig.whenScrolling()
  // 启动新定时器，延迟后无新滚动则判定为停止
  scrollTimer = setTimeout(() => {
    scrollConfig.whenScrollStop()
  }, scrollConfig.stopJudgeDelay)
})

// 页面初始化时先执行一次停止状态逻辑，适配首次加载未滚动的场景
scrollConfig.whenScrollStop()

角色行走动效扩展说明 #

你提到的滚动时角色行走、停止时站立的效果，和上述逻辑完全通用，不需要额外复杂开发：

• 提前准备角色素材：站立状态静帧、行走状态的序列帧/CSS动画
• 只需要把配置项里的显示隐藏逻辑，替换成动画类的增删、素材源切换即可
• 建议把停止判定阈值设置在100~200ms区间，避免滚动过程中的微小卡顿导致状态频繁切换，影响观感。

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