如何修改滚动逐显元素代码，摆脱body高度依赖并消除滚动条

之前的代码靠固定body高度生成滚动区域，现在改成直接监听滚轮/触摸事件计算进度，彻底摆脱元素高度依赖，同时完全隐藏滚动条（包括iOS端的默认滚动条）。

完整重构代码 #

HTML #

<div id="reveal">
  <span>Scrolling</span>
  <span>should</span>
  <span>reveal</span>
  <span>elements</span>
  <span>one</span>
  <span>by</span>
  <span>one</span>
</div>

CSS #

:root {
  --percentage: 0;
}

#reveal span {
  opacity: var(--percentage);
  /* 可选：添加过渡动画让显示更平滑 */
  transition: opacity 0.3s ease;
  margin-right: 8px;
}

/* 全局隐藏滚动条，覆盖全平台 */
body {
  margin: 0;
  overflow: hidden;
  /* iOS端额外处理：阻止默认滚动行为的配套设置 */
  -webkit-overflow-scrolling: touch;
}

#reveal {
  position: fixed;
  top: 20px;
  left: 20px;
}

JavaScript #

const unit = document.querySelectorAll("#reveal span");
const totalElements = unit.length;
let scrollProgress = 0;
// 滚动灵敏度：数值越大，滚轮/滑动越容易触发进度变化
const sensitivity = 0.02;

// 桌面端滚轮事件监听
document.addEventListener("wheel", (e) => {
  // 根据滚轮方向调整进度：向下滚增加，向上滚减少
  scrollProgress += e.deltaY > 0 ? sensitivity : -sensitivity;
  // 限制进度在0-1区间，避免越界
  scrollProgress = Math.max(0, Math.min(1, scrollProgress));
  updateElementVisibility();
});

// 移动端（含iOS）触摸滑动监听
let touchStartY = 0;
document.addEventListener("touchstart", (e) => {
  touchStartY = e.touches[0].clientY;
});

document.addEventListener("touchmove", (e) => {
  e.preventDefault(); // 阻止iOS默认滚动行为，避免出现滚动条
  const touchDelta = touchStartY - e.touches[0].clientY;
  // 根据滑动距离调整进度
  scrollProgress += touchDelta * 0.001;
  scrollProgress = Math.max(0, Math.min(1, scrollProgress));
  updateElementVisibility();
  touchStartY = e.touches[0].clientY;
});

// 统一更新元素显示状态的核心函数
function updateElementVisibility() {
  unit.forEach((el, index) => {
    // 判断当前元素是否应该显示：元素序号占总数量的比例 ≤ 当前滚动进度
    const shouldShow = (index / totalElements) <= scrollProgress;
    el.style.setProperty("--percentage", shouldShow ? 1 : 0);
  });
}

关键改动说明 #

• 移除body高度依赖：不再靠设置固定body高度生成滚动区域，直接通过事件计算0-1区间的滚动进度值
• 彻底隐藏滚动条：
  • 桌面端：给body设置overflow: hidden直接隐藏滚动条
  • iOS端：触摸事件中调用e.preventDefault()阻止默认滚动行为，配合-webkit-overflow-scrolling: touch避免系统滚动条出现
• 跨设备兼容：同时支持桌面滚轮和移动端触摸滑动，用统一进度值控制元素显示
• 逻辑优化：提取独立的更新函数，限制进度区间避免异常显示

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