Chrome非页面顶部刷新时$(window).one('scroll')立即触发如何解决

Chrome 恢复刷新前滚动位置的操作是异步执行的，优先级高于 DOM 加载阶段同步执行的 scrollTop 赋值，你手动设置滚动位置后，浏览器还会自动覆盖为刷新前的位置，这个自动滚动的动作就会触发你提前绑定的 scroll 事件，导致着陆页误消失。

方案1：禁用浏览器自动滚动恢复（最稳定） #

直接通过 History API 关闭浏览器的滚动位置自动恢复能力，从根源避免自动滚动触发的事件，不需要修改原有业务逻辑。
在页面 <head> 内联执行这段代码（越早执行效果越稳定）：

if ('scrollRestoration' in history) {
  // 禁止浏览器自动恢复滚动位置
  history.scrollRestoration = 'manual';
}
// 主动复位到顶部
window.scrollTo(0, 0);

方案2：延迟绑定 scroll 事件（保留滚动恢复能力） #

如果你的业务需要保留浏览器自动恢复滚动位置的特性，可以等浏览器完成滚动位置恢复后，再绑定滚动事件：

window.addEventListener('pageshow', () => {
  // 两次 requestAnimationFrame 确保浏览器渲染队列中的滚动恢复操作已执行完成
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      $(window).one('scroll', () => {
        // 原有隐藏着陆页的业务逻辑
      });
    });
  });
});

方案3：增加事件触发校验（兼容极端场景） #

如果不想调整绑定时机，可以给滚动事件增加过滤逻辑，忽略页面加载初期浏览器自动触发的滚动：

const PAGE_LOAD_STABLE_DELAY = 150;
const pageInitTime = Date.now();

// 用具名函数兼容严格模式
function handleScroll() {
  // 过滤加载后150ms内的自动滚动事件
  if (Date.now() - pageInitTime < PAGE_LOAD_STABLE_DELAY) {
    $(window).one('scroll', handleScroll);
    return;
  }
  // 原有隐藏着陆页的业务逻辑
}

$(window).one('scroll', handleScroll);

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