如何将滚动位置重新计算映射至指定数值范围？

要实现滚动时将滚动位置映射到0.9-1.1的范围，并动态修改CSS属性，按以下步骤操作：

核心思路 #

1. 计算可滚动总高度：页面内容总高度减去当前视口高度，得到滚动条能滚动的最大距离。
2. 计算滚动进度：当前滚动位置与总可滚动高度的比值（范围0-1）。
3. 线性映射数值：将0-1的进度值转换为0.9-1.1的目标范围。
4. 动态修改CSS：用映射后的数值更新目标元素的scaleX（或其他属性）。

完整实现代码 #

HTML结构 #

<div class="item1">dynamic content height</div>
<div class="item2">dynamic content height</div>
<div class="item3">dynamic content height</div>

JavaScript代码（含防抖优化） #

// 获取目标元素（这里以.item2为例，可根据需求修改）
const targetElement = document.querySelector('.item2');

// 防抖函数，避免滚动事件触发过于频繁导致性能问题
function debounce(func, delay = 16) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 滚动监听逻辑
document.addEventListener('scroll', debounce(() => {
  const scrollY = window.scrollY;
  // 计算总可滚动高度：文档总高度 - 视口高度
  const totalScrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  
  // 处理内容未超出视口的情况（避免除以0）
  if (totalScrollHeight <= 0) {
    targetElement.style.transform = 'scaleX(0.9)';
    return;
  }

  // 计算滚动进度（限制在0-1之间）
  const scrollProgress = Math.min(Math.max(scrollY / totalScrollHeight, 0), 1);
  
  // 将进度映射到0.9-1.1的范围
  const mappedValue = scrollProgress * 0.2 + 0.9;
  
  // 动态修改CSS的scaleX属性
  targetElement.style.transform = `scaleX(${mappedValue})`;
}));

关键代码解释 #

• 总可滚动高度计算：document.documentElement.scrollHeight是整个页面的内容高度，window.innerHeight是当前视口高度，两者差值就是滚动条能滚动的最大距离。
• 滚动进度限制：用Math.min和Math.max确保进度值始终在0-1之间，避免滚动超出边界时出现异常值。
• 线性映射公式：scrollProgress * (1.1 - 0.9) + 0.9，其中1.1-0.9是目标范围的差值，乘以进度后加上最小值，得到最终的映射值。
• 防抖优化：滚动事件会高频触发，防抖函数能减少函数执行次数，提升页面性能。

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