javascript - 手机淘宝m.taobao.com是怎么做到在手机浏览器访问时上下滑动始终不隐藏浏览器地址栏？

Question

我怀疑是用了个可滑动的p。
可是它的高度又该怎么设置呢？怎么兼容大部分浏览器呢？

Answer 1

到底是隐藏隐藏。。。。
方法：

百度js隐藏手机地址栏和菜单栏

js代码示例：

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

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

Android 和 ios两个平台要用不同的实现方法。
Android版的实现方法：

  function hideAddressBar_android(){         var n = navigator.userAgent; if(n.match(/UCBrowser/i)){ //uc浏览器 hideAddressBar_ios(); return false;          } var self = document.getElementsByTagName( body )[0]; if (self.requestFullscreen) { //html5新增的全屏方法 self.requestFullscreen(); } else if (self.mozRequestFullScreen) { //针对mozlia内核的hack self.mozRequestFullScreen(); } else if (self.webkitRequestFullScreen) { //针对webkit内核的hack self.webkitRequestFullScreen(); } }; 

iOS版的实现方法：
给页面添加一个载入事件的监听； 页面载入完成后，延迟100毫秒后使页面向上移动一部分，使地址栏隐藏掉。

 window.addEventListener( load , 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);      }, 100); }); mata加入方法 <meta name= viewport content= width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui /> <meta name= apple-mobile-web-app-capable content= yes /> <meta name= apple-touch-fullscreen content= no /> <style type= text/css >

p固定底部：

position:fixed;
bottom:0;
这个方法简单好用

运用这个CSS把p永远置于页面的底部
利用绝对定位，然后设置底部距离为0

.header{ position:fixed; left:0; top:0; width:100%; height:100px; z-index:9999; background-color:#000;}
／／固定头部搜索栏

有问题在webkit浏览器内核f12调试下就好了

参考下阿里巴巴国际UED前端出品的移动端UI库 url：http://m.sui.taobao.org/compo...