如何实现滚动时显示box-shadow、停止滚动后隐藏的效果？

算力阿峰

2026-5-15

实现滚动显示阴影、停止滚动隐藏阴影的方案

这个需求很典型，咱们可以借助**定时器（setTimeout）**来精准检测滚动停止的时机，核心逻辑是：每次滚动触发时重置定时器，确保只有当用户停止滚动一段时间后，才会移除阴影。下面给你两种实现方式：

方式一：直接操作行内样式

这种方式适合快速测试，直接修改元素的style属性：

var topBar = document.getElementById('top-bar');
var wrapper = document.getElementById('wrapper');
let scrollTimer; // 存储定时器ID，用于后续清除

wrapper.onscroll = function () {
  // 每次滚动时先清除之前的定时器，避免未到时间就执行隐藏
  clearTimeout(scrollTimer);
  
  // 滚动过程中显示阴影
  topBar.style.boxShadow = "10px 20px 30px blue";
  
  // 设置300ms延迟，若期间无新滚动事件则隐藏阴影
  scrollTimer = setTimeout(() => {
    topBar.style.boxShadow = "none";
  }, 300);
};

方式二：用CSS类切换（推荐）

把样式逻辑从JS中抽离到CSS里，更利于维护和扩展：

首先在CSS中定义阴影样式：

.top-bar--shadow {
  box-shadow: 10px 20px 30px blue;
}

然后修改JS代码，通过添加/移除类来控制阴影：

var topBar = document.getElementById('top-bar');
var wrapper = document.getElementById('wrapper');
let scrollTimer;

wrapper.onscroll = function () {
  clearTimeout(scrollTimer);
  topBar.classList.add('top-bar--shadow');
  
  scrollTimer = setTimeout(() => {
    topBar.classList.remove('top-bar--shadow');
  }, 300);
};