当前位置：首页 > 文章列表 > 文章 > 前端 > 滚动控制元素显隐，动态实现方法详解

滚动控制元素显隐，动态实现方法详解

2026-04-16 21:00:52 0浏览收藏

✅ 正确逻辑：使用「区间判断」替代「单点阈值」

原始代码的问题在于仅用 >= 判断，导致状态无法回退——例如当 scrollY ≥ 30 时隐藏 squareOne，但未处理 scrollY < 20 或 20 ≤ scrollY < 30 的情况，造成状态混乱。关键原则是：每个元素的显示必须有明确的「生效区间」，区间外应统一归为隐藏状态。

以下为优化后的基础实现（适配两个方块）：

const s1 = document.getElementById("s1");
const s2 = document.getElementById("s2");

const myScrollFunc = () => {
  const y = window.scrollY;

  // squareOne：仅在 200px ~ 600px 滚动范围内显示
  if (y >= 200 && y <= 600) {
    s1.className = "squareOne show";
  } else {
    s1.className = "squareOne hide";
  }

  // squareTwo：仅在 600px ~ 900px 范围内显示（可无缝衔接或留空隙）
  if (y >= 600 && y <= 900) {
    s2.className = "squareTwo show";
  } else {
    s2.className = "squareTwo hide";
  }
};

window.addEventListener("scroll", myScrollFunc);

? 提示：示例中使用 200/600 等较大数值是为了便于测试（小屏下 20px 难以稳定触发）。实际项目中请根据布局需求调整阈值，并建议添加 throttle 防抖（如 Lodash 的 _.throttle 或原生 setTimeout 控制），避免高频触发影响性能。

? 进阶方案：数据驱动 + 可扩展结构

当元素数量增加（如 5 个、10 个步骤），硬编码 if/else 将难以维护。推荐使用 *HTML `data-属性 +querySelectorAll` 批量处理** 的声明式方案：

HTML 结构（支持任意数量）：


  1
  2
  3

CSS（复用 .box 基础样式）：

.box {
  position: fixed;
  width: 60px; height: 60px;
  z-index: 1;
  transition: opacity 0.5s;
}
div[data-show="false"] { opacity: 0; }
div[data-show="true"] { opacity: 1; }
.one { background: palegreen; }
.two { background: orange; }
.three { background: lightblue; }

JavaScript（自动适配所有 .box 元素）：

const handleScroll = () => {
  const y = window.scrollY;
  document.querySelectorAll(".box").forEach(box => {
    const start = parseInt(box.dataset.start, 10);
    const end = parseInt(box.dataset.end, 10);
    box.dataset.show = y >= start && y <= end ? "true" : "false";
  });
};

// 添加防抖（推荐生产环境使用）
let ticking = false;
window.addEventListener("scroll", () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      handleScroll();
      ticking = false;
    });
    ticking = true;
  }
});

⚠️ 注意事项与最佳实践

避免直接操作 className：多次赋值会覆盖其他类名（如 transition 相关类）。推荐使用 classList.toggle() 或 dataset 方案，更安全可控。
CSS 过渡需作用于 opacity 或 transform：确保 transition 属性正确绑定到变化的 CSS 属性上（本例中 opacity 已配置）。
移动端兼容性：window.scrollY 在 iOS Safari 中表现稳定，但需确保正确设置。
无障碍考量：动态显隐元素时，可通过 aria-hidden 同步更新语义状态，提升屏幕阅读器体验。

通过以上两种方案，你既能快速解决双元素切换问题，也能平滑升级至支持数十个滚动触发动画的可维护架构。核心始终是：以滚动位置为输入，以区间逻辑为判断依据，以数据驱动为长期演进路径。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《滚动控制元素显隐，动态实现方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。