修复JavaScript滚动事件控制的滑动门动画窗口滚动问题

核心修复思路 #

1. 脱离真实页面滚动依赖：自定义滚动进度变量，替代window.scrollY，避免背景内容随滚动偏移。
2. 强制滚动触发条件：给页面设置最小高度，确保内容不足时也能触发滚动事件。
3. 全滚动场景兼容：同时监听滚轮和滚动条事件，解决刻度鼠标卡顿、滚动条无响应问题。

完整代码实现 #

HTML 结构

<body>
  <div id="top-cover" class="cover"></div>
  <div id="bottom-cover" class="cover"></div>
  <div id="content">
    <!-- 你的作品集内容 -->
    <h1>我的作品集</h1>
    <p>这里是作品展示区域...</p>
  </div>
</body>

CSS 样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 强制页面有足够滚动空间，解决内容不足无法触发滚动的问题 */
  min-height: 200vh;
  /* 初始阻止页面滚动，避免背景内容偏移 */
  overflow: hidden;
}

.cover {
  position: fixed;
  left: 0;
  width: 100%;
  height: 50vh;
  background-color: #2c3e50; /* 自定义封面颜色 */
  z-index: 10;
  /* 平滑过渡动画，解决刻度鼠标卡顿 */
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#top-cover {
  top: 0;
}

#bottom-cover {
  bottom: 0;
  top: auto;
}

#content {
  position: relative;
  z-index: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 滑动完成后允许页面正常滚动 */
body.cover-removed {
  overflow: auto;
}

body.cover-removed .cover {
  display: none;
}

JavaScript 逻辑

let scrollProgress = 0;
const maxProgress = window.innerHeight / 2;
const topCover = document.getElementById("top-cover");
const bottomCover = document.getElementById("bottom-cover");
const body = document.body;
let lastScrollTop = 0;

function handleScroll(e) {
  e.preventDefault();

  // 计算滚动增量，兼容滚轮和滚动条拖动
  let delta = 0;
  if (e.type === "wheel") {
    // 滚轮事件：直接获取滚动方向增量
    delta = e.deltaY;
  } else if (e.type === "scroll") {
    // 滚动条拖动：计算滚动差值
    delta = window.scrollY - lastScrollTop;
    lastScrollTop = window.scrollY;
    // 重置页面滚动位置，避免真实滚动偏移
    window.scrollTo(0, 0);
  }

  // 更新滚动进度，限制在0到最大进度范围内
  scrollProgress += delta * 0.6; // 调整系数控制滑动速度
  scrollProgress = Math.max(0, Math.min(maxProgress, scrollProgress));

  // 更新封面位置
  topCover.style.transform = `translateY(-${scrollProgress}px)`;
  bottomCover.style.transform = `translateY(${scrollProgress}px)`;

  // 滑动完成后解锁页面滚动
  if (scrollProgress >= maxProgress) {
    body.classList.add("cover-removed");
    // 移除事件监听，避免后续干扰
    window.removeEventListener("wheel", handleScroll);
    window.removeEventListener("scroll", handleScroll);
  }
}

// 绑定滚动事件，passive: false 才能阻止默认行为
window.addEventListener("wheel", handleScroll, { passive: false });
window.addEventListener("scroll", handleScroll, { passive: false });

关键修复说明 #

• 避免背景滚动：初始给body设置overflow: hidden，滚动事件中调用e.preventDefault()并重置滚动条位置，彻底阻止页面真实滚动。
• 兼容滚动条操作：同时监听wheel和scroll事件，滚动条拖动时通过计算scrollY差值更新进度，立即重置页面滚动位置。
• 解决卡顿问题：给封面添加transition过渡动画，配合缓动函数，让刻度鼠标的滚动操作也能平滑触发滑动效果。
• 内容不足适配：body设置min-height: 200vh，确保即使页面内容很少，也能生成滚动条触发滚动事件。

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