固定布局下如何滚动隐藏iOS Safari地址栏？

核心原因 #

iOS Safari的地址栏隐藏逻辑依赖于浏览器主滚动容器（body/html）的滚动行为，如果仅让内部fixed定位的main元素滚动，浏览器不会触发地址栏的自动隐藏机制。你的当前布局中，body被设置为overflow-y: hidden，滚动仅发生在main内部，这是问题的关键。

解决方案步骤 #

1. 调整布局结构与样式 #

移除body的overflow-y: hidden，让body成为主滚动容器；同时修改main的定位方式，不再使用fixed，而是通过margin避开固定的头部和底部：

修改后的HTML结构

<div class="antialiased relative">
    <!-- header -->
    <div id="headerMobile" class="fixed left-0 top-0 right-0 z-10 w-full py-1 px-3 shadow-[0_4px_6px_0_rgba(141,159,207,0.16)] bg-blue-200" style="height: 42px;">
        <header class="flex justify-between items-center">
            <button>Menu</button>
            <h1>Website Name</h1>
            <div class="relative flex justify-between items-center">Profile</div>
        </header>
    </div>

    <!-- main content -->
    <main class="z-0 flex flex-row justify-center pt-[42px] pb-[67px] min-h-screen">
        <!-- Content here -->
    </main>

    <!-- footer -->
    <div id="footerMobile" class="fixed bottom-0 left-0 right-0 z-1 w-full py-2 px-10 flex justify-between items-center shadow-[0_4px_6px_0_rgba(141,159,207,0.16)] bg-red-300 border-t-2 border-t-[rgba(141,159,207,0.16)]" style="height: 67px;">
        <a href="/">Home</a>
        <a href="/search">Search</a>
        <a href="/rankings">Ranking</a>
    </div>
</div>

修改后的CSS

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins";
  overscroll-behavior-y: none;
  /* 移除overflow-y: hidden */
}

*,
body,
html {
  margin: 0;
  padding: 0;
}

2. 确保视口Meta标签正确设置 #

在HTML头部添加或确认以下meta标签，保证页面适配移动视口：

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

3. 可选：页面加载时触发滚动（辅助优化） #

如果页面加载后地址栏未自动隐藏，可以添加一段JS代码，在页面加载完成后触发一次微小的滚动，触发浏览器的地址栏隐藏逻辑：

window.addEventListener('load', () => {
  setTimeout(() => {
    window.scrollTo(0, 1);
  }, 100);
});

原理说明 #

通过让body成为主滚动容器，当页面内容高度超过视口时，iOS Safari会在用户滚动时自动隐藏地址栏；固定的头部和底部通过fixed定位保持在视口顶部和底部，main内容通过margin预留出头部和底部的空间，避免被遮挡。

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