移动端浏览器地址栏会根据页面滚动方向自动隐藏或显示，这是浏览器原生行为，开发者无法通过 javascript 直接控制；只需确保页面主体可自然滚动（如 `html>` 或 `
` 为滚动容器），避免干扰默认滚动机制即可。在现代移动浏览器（如 Chrome for Android、Safari on iOS）中，地址栏的自动隐藏/显示是一个由浏览器内核统一管理的用户体验优化特性，并非网页可编程接口（API）暴露的功能。当用户向下滚动页面时，浏览器会自动收起顶部地址栏以腾出更多可视区域；向上滚动时则重新展开——这一行为完全由浏览器根据滚动方向、速度和页面滚动容器的层级自动触发。
✅ 正确做法：保持原生滚动流
确保滚动发生在 <html> 或 <body> 根容器上，而非内部某个 div：
<!-- ✅ 推荐：让 html/body 自然滚动 -->
<html style="height: 100%; overflow-y: auto;">
<body style="margin: 0; min-height: 100vh;">
<header>...</header>
<main>
<!-- 大量内容，高度超出视口 -->
<p>Scroll down to hide address bar...</p>
<!-- 更多内容 -->
</main>
</body>
</html>❌ 常见错误（导致地址栏锁定不隐藏）：
- 给 <html> 或 <body> 设置 height: 100vh + overflow: hidden；
- 在 .container { height: 100vh; overflow-y: auto; } 内部滚动（即“局部滚动”）；
- 使用 position: fixed 或 transform: translateZ(0) 等触发合成层但阻断根滚动；
- 引入第三方滚动库（如 iScroll、smooth-scrollbar）接管滚动逻辑。
⚠️ 注意事项：
- iOS Safari 对该行为更敏感，若 <body> 有 overscroll-behavior: none 或 touch-action: none，可能禁用地址栏自动隐藏；
- 不要尝试用 window.scrollTo()、scrollIntoView() 或监听 scroll 事件来“模拟”地址栏控制——既无效，也违反浏览器安全策略；
- 无 CSS 或 JS API 可查询当前地址栏是否可见（window.innerHeight 在地址栏隐藏后会变大，但不可靠且存在延迟）。
? 总结：这不是一个需要“实现”的功能，而是一个需要“不破坏”的默认行为。检查你的 CSS 是否意外禁用了根元素滚动，移除 max-height、overflow: hidden、固定高度等限制，让内容自然撑开页面并触发浏览器原生滚动，地址栏便会按预期响应滚动方向自动隐藏/显示。
