JS实现移动端浏览器地址栏自动隐藏的原理与解决方案

移动端浏览器地址栏隐藏原理

在手机自带浏览器中访问百度或淘宝等网站时，首页加载完成后，页面上方的地址栏会自动隐藏。配合针对移动端优化的界面设计，这种体验与原生应用（Native App）极为相似。例如，使用Safari浏览器访问淘宝首页时，若无底部工具栏，几乎无法区分这是Web页面还是原生应用。实际上地址栏依然存在，只需向下拖动页面即可看到。

基础实现：使用window.scrollTo

实现地址栏隐藏的核心思路是利用window.scrollTo()方法，将页面在屏幕上向上滚动，使地址栏移出可视区域。

<script>
window.onload=function(){
setTimeout(function() {
window.scrollTo(0, 1)
}, 0);
}; 
</script>

然而，如果页面内容极少（例如仅包含一句话），直接添加上述脚本会发现地址栏并未隐藏。

这是否意味着window.scrollTo()在特定浏览器中失效？

实际上，当网页内容高度超过屏幕高度时，浏览器会自动触发地址栏隐藏。

解决方案：动态调整Body高度

为解决内容较少时地址栏不隐藏的问题，需在执行滚动操作前，通过程序动态调整body的高度，使其具备滚动条件。

if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
}

完整示例代码

以下为一个完整页面示例，默认状态下地址栏已隐藏，下拉后可见地址栏。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1,">
<title>我是个网页，但不显示滚动条</title>
<script>
window.onload=function(){
if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
bodyTag = document.getElementsByTagName('body')[0];
bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
} 
setTimeout(function() {
window.scrollTo(0, 1)
}, 0);
}; 
</script>
<style>
/*输入框圆角显示*/
input {
background:#fff; border: 1px solid #080;
padding:5px;
-webkit-border-radius:5px;
} 
/* button
---------------------------------------------- */ 
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
} 
/* green */
.green {
color: #e8f0de;
border: solid 1px #538312;
background: #64991e;
background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
} 
</style>
</head>
<body style="background: #ededed;">
<div style="padding-top:40%;padding-left:20%">
帐号：<input type="text"><br/>
密码：<input type="text"><br/>
<div>
<div style="padding-top:5%;padding-left:23%"><input type="button" class="button green" value="登录"></div>
</body>
</html>