JavaScript中window.pageYOffset触发平滑滚动后取值不符问题求助

问题原因 #

你两次打印的window.pageYOffset值完全相同，核心原因是 带behavior: 'smooth'的滚动是异步非阻塞操作：
JS代码是同步逐行执行的，调用scrollTo传入smooth参数后，浏览器仅会把滚动任务加入异步执行队列，不会等待滚动完成再执行后续代码。你在调用scrollTo后立刻打印结束位置时，平滑滚动还没有实际启动，因此拿到的仍是滚动前的位置值。

解决方案 #

如果需要获取滚动完全结束后的位置，可监听全局scrollend事件，该事件会在页面滚动动作全部完成后触发，修改后的代码如下：

const sectionList = document.querySelectorAll('.section');

const sectionHeight = Number.parseFloat(getComputedStyle(sectionList[0]).height);

sectionList.forEach(function(section){
  section.addEventListener('click',function(e){
    console.log(`data count:${section.dataset.count}`);
    console.log(`Start scroll position X/Y: ${window.pageXOffset}/${window.pageYOffset}`)

    let targetTop;
    if (section.dataset.count == 4){
      targetTop = 0;
    } else {
      targetTop = sectionHeight * section.dataset.count;
    }

    // 绑定滚动结束事件，结束后打印位置并解绑避免重复触发
    const handleScrollEnd = () => {
      console.log(`End scroll position X/Y: ${window.pageXOffset}/${window.pageYOffset}`);
      window.removeEventListener('scrollend', handleScrollEnd);
    }
    window.addEventListener('scrollend', handleScrollEnd);

    scrollTo({
      top: targetTop,
      left: 0,
      behavior: 'smooth'
    })
  })
})

兼容说明 #

如果需要适配不支持scrollend事件的旧版浏览器，可通过requestAnimationFrame循环检测当前滚动位置是否到达目标值，或是根据滚动动画时长通过setTimeout延迟打印位置，不过两种方案的准确性均低于原生scrollend事件。

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