咨询：JavaScript窗口滚动事件返回值随浏览器尺寸变化的解决方法

嘿，我懂你遇到的困扰了——监听window.scroll事件时，直接拿的滚动值（比如scrollY或scrollTop）会跟着浏览器窗口大小变来变去，比如同样滚到页面“中间位置”，窗口小的时候scrollY数值会比窗口大时大很多。要让返回值保持恒定，核心思路是把基于视口的滚动值转换成基于文档或目标元素的相对值，下面给你几个实用方案：

方案1：计算滚动的相对百分比（最常用） #

如果你想要一个0到1之间的恒定比例，用来表示当前滚动进度（0对应页面顶部，1对应页面底部），可以用这个公式：

window.addEventListener('scroll', () => {
  // 文档总高度减去当前视口高度，得到实际可滚动的总距离
  const scrollableTotal = document.documentElement.scrollHeight - window.innerHeight;
  // 滚动进度 = 当前滚动距离 / 可滚动总距离（避免除以0的情况）
  const scrollProgress = scrollableTotal > 0 ? window.scrollY / scrollableTotal : 0;
  
  console.log(scrollProgress); // 不管窗口多大，滚到同一相对位置这个值都一致
});

比如滚到页面一半位置时，不管窗口是宽屏还是小屏，scrollProgress都会是0.5，完全恒定。

方案2：基于目标元素的绝对位置计算 #

如果你是想跟踪滚动到某个特定元素的位置，别用视口相关的位置（比如getBoundingClientRect()的结果），改用元素相对于文档顶部的固定绝对位置：

// 先获取目标元素相对于文档顶部的固定偏移量
const targetEl = document.querySelector('#your-target-element');
const targetAbsoluteTop = targetEl.offsetTop;

window.addEventListener('scroll', () => {
  // 计算当前滚动位置与目标元素顶部的差值
  const distanceToTarget = targetAbsoluteTop - window.scrollY;
  
  console.log(distanceToTarget); // 这个值只和滚动位置、元素固定位置有关，和窗口大小无关
});

这里的targetAbsoluteTop是元素在文档里的固定位置，所以不管窗口怎么调整，滚到同一位置时，这个差值都会保持不变。

方案3：锚定关键滚动点的恒定标记 #

如果你需要标记页面里的关键滚动节点，可以先给这些节点的绝对位置做记录，然后通过判断滚动位置是否到达锚点来返回恒定标识：

// 预先定义关键区域的绝对偏移量
const keyAnchors = {
  headerEnd: document.querySelector('#header').offsetTop + document.querySelector('#header').offsetHeight,
  section1: document.querySelector('#section-1').offsetTop,
  section2: document.querySelector('#section-2').offsetTop
};

window.addEventListener('scroll', () => {
  let currentAnchor = 'top';
  for (const [name, offset] of Object.entries(keyAnchors)) {
    if (window.scrollY >= offset - 30) { // 30px是容错范围，避免滚动抖动
      currentAnchor = name;
    }
  }
  
  console.log(currentAnchor); // 滚到section1区域时，始终返回"section1"，和窗口大小无关
});

为什么原来的数值会变化？ #

你之前看到的数值波动，本质是因为scrollY、scrollTop这类值表示的是视口顶部到文档顶部的像素距离——窗口越小，能展示的内容越少，要滚到同一内容位置，需要滚动的像素距离自然就越大。而上面的方案都是把这个“可变的像素距离”转换成了“相对比例”或“固定绝对位置差值”，所以就能得到恒定的返回值了。

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