如何在iOS 15+的Safari中用JS触发上滑手势隐藏地址栏？

问题背景 #

在iOS 15及以上版本的Safari浏览器中，通过JavaScript调用scroll()、scrollIntoView()等方法触发滚动时，无法像手动向上轻扫那样自动隐藏底部地址栏，仅手动操作才能触发全屏视图，旧版iOS的相关解决方案已不再生效。

可行解决方案 #

iOS Safari对JS触发的滚动有严格的交互校验，仅当滚动行为更贴近原生手动手势特征时，才会触发地址栏隐藏逻辑。可以通过先快速滚动到目标位置，再执行微小的滚动微调的方式，触发浏览器的地址栏隐藏机制，同时保证页面最终位置准确。

修改后的代码示例 #

let topButton = document.querySelector('.top'),
    bottomButton = document.querySelector('.bottom');

function scrollToBottom() {
  // 第一步：直接滚动到页面底部
  window.scrollTo({
    top: document.body.scrollHeight,
    left: 0,
    behavior: 'auto'
  });
  // 第二步：通过微小滚动触发地址栏隐藏，再修正位置
  requestAnimationFrame(() => {
    window.scrollBy({ top: 1, left: 0, behavior: 'auto' });
    requestAnimationFrame(() => {
      window.scrollBy({ top: -1, left: 0, behavior: 'auto' });
    });
  });
}

function scrollToTop() {
  // 第一步：直接滚动到页面顶部
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'auto'
  });
  // 第二步：微小滚动触发地址栏隐藏，再修正位置
  requestAnimationFrame(() => {
    window.scrollBy({ top: -1, left: 0, behavior: 'auto' });
    requestAnimationFrame(() => {
      window.scrollBy({ top: 1, left: 0, behavior: 'auto' });
    });
  });
}

topButton.addEventListener('click', scrollToBottom);
bottomButton.addEventListener('click', scrollToTop);

关键原理说明 #

1. 用户交互上下文：确保滚动操作在用户触发的事件（如click）回调中执行，这是iOS Safari允许触发地址栏变化的前提。
2. 分步滚动触发：先执行一次性滚动到目标位置，再通过requestAnimationFrame执行两次微小的反向滚动，模拟手动滚动的连续行为，触发浏览器的地址栏隐藏逻辑，最后修正页面位置避免偏移。
3. 使用behavior: 'auto'：相较于平滑滚动，瞬间滚动更易被浏览器识别为用户发起的有效滚动操作，配合后续微调即可触发地址栏变化。

额外注意事项 #

• 该方案仅适用于iOS 15及以上版本的Safari，其他浏览器或旧版iOS可能无需此处理。
• 需确保页面内容高度足够触发地址栏隐藏（即页面高度超过视口高度），否则地址栏不会隐藏。

内容的提问来源于stack exchange，提问作者user.railCoil