通过JS自动隐藏手机浏览器的地址栏

大家通过手机自带浏览器打开百度、淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分这是WEB APP还是Native App,如下左侧图片为通过safari打开淘宝网的首页,要不是因为底下的浏览器工具栏,还真像Native App。实际上它是有地址的,向下拖动就会看到地址栏,如下右侧图片。

如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用window.scrollTo()方法,将当前页面在屏幕上向上滚动,造成地址栏超出视野范围

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

但若你做一个简单页面,比如只有一句话,加上如上脚本,你会悲摧的发现, 地址栏就是不自动隐藏;难道window.scrollTo()方法在这个浏览器不生效?

但是若你网页内容比较多,超过屏幕高度时,却会自动隐藏地址栏;

如何解决在内容较少时,同样隐藏地址栏呢?需在滚动之前程序动态设置一下body的高度,增加如下代码:

if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) {
	bodyTag = document.getElementsByTagName('body')[0];
	bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height + 'px';
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值