滚动时隐藏移动 Safari 中的地址栏(touchOverflow) [英] Hide address bar in mobile Safari when scrolling (touchOverflow)
本文介绍了滚动时隐藏移动 Safari 中的地址栏(touchOverflow)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想继续一些其他问题:
jquery mobile如何隐藏mobile safari的地址栏?
这会在页面加载后隐藏地址栏.
但是，这是我的新问题:
如果我向上滚动以重新显示地址栏，向下滚动页面时地址栏不会隐藏.
所以，基本上我想在页面向下滚动时隐藏地址栏.
解决方案
解决方案
我考虑了滚动位置，结果是这样的:
var touchHeight = $('.mobile-touch-overflow').height(),screenHeight = utils.getScreenHeight() - (utils.notStandalone()?44:0);//touchOverflow: 滚动时隐藏地址栏if(touchHeight > screenHeight && utils.supportTouchOverflow()){$('.mobile-touch-overflow').bind('touchmove',function(){if($('.page-content').offset().top <0){utils.windowScroll(1);}返回真；});}这里是测试文件:
<头><title>title</title><meta http-equiv="content-type" content="text/html; charset=utf-8"/><!-- 视口--><meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/><!-- webapp --><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><style type='text/css'>身体 {背景:#E0E0E0；边距:0；填充:0；溢出-x:隐藏；}.page-wrapper {宽度:自动；}/* 原生溢出滚动 */.mobile-touch-overflow {溢出:自动；-webkit-overflow-scrolling:触摸；}.mobile-touch-overflow,.mobile-touch-overflow * {/* 某种程度的变换可以防止元素在 iOS 上闪烁不可见 */-webkit-transform:rotateY(0);}.页头{显示:块；背景:灰色；边框底部:1px 实心 #CDCDCD；填充:10px；}.page-content {填充:10px；}.页脚{显示:块；边框顶部:1px 实心 #CDCDCD；左边距:10px；右边距:10px；填充:10px；填充左:0;填充右:0;文本对齐:居中；字体大小:12px；颜色:#FFF；}</风格><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script type="text/javascript">/** 实用程序*/var utils = {初始化:函数(){var touchHeight = $('.mobile-touch-overflow').height(),screenHeight = utils.getScreenHeight() - (utils.notStandalone()?44:0);//touchOverflow: 滚动时隐藏地址栏if(touchHeight > screenHeight && utils.supportTouchOverflow()){$('.mobile-touch-overflow').bind('touchmove',function(){if($('.page-content').offset().top <0){utils.windowScroll(1);}返回真；});}},支持TouchOverflow:函数(){return !!utils.propExists("overflowScrolling");},支持方向:函数(){返回(窗口中的方向"和窗口中的onorientationchange")；},//简单地将活动页面的最小高度设置为屏幕高度，具体取决于方向获取屏幕高度:函数(){var 方向 = utils.getOrientation(),端口 = 方向 === 纵向"，winMin = 端口?480 : 320,屏幕高度 = 端口?screen.availHeight : screen.availWidth,winHeight = Math.max( winMin, $(window).height() ),pageMin = Math.min( screenHeight, winHeight);返回页分钟；},获取窗口高度:函数(){返回 window.innerHeight ?window.innerHeight : $(window).height();},//获取当前页面方向.这个方法是公开的，应该//需要，如 jQuery.event.special.orientationchange.orientation()获取方向:函数(){var isPortrait = true,elem = document.documentElement,Portrait_map = { "0": true, "180": true };//更喜欢窗口方向而不是基于屏幕大小的计算//实际的屏幕大小调整发生在方向改变事件之前或之后//已被触发，具体取决于实现(例如 android 2.3 之前，iphone 之后).//需要更多的测试来确定是否有更可靠的方法来确定新的屏幕尺寸//当orientationchange 被触发时是可能的.(例如，使用媒体查询 + 元素 + 不透明度)如果 ( utils.supportOrientation() ) {//如果窗口方向注册为 0 或 180 度报告//纵向，否则横向isPortrait = Portrait_map[ window.orientation ];} 别的 {isPortrait = elem &&elem.clientWidth/elem.clientHeight <1.1;}返回 isPortrait ?风景素描";},窗口滚动:功能(ypos){设置超时(功能(){window.scrollTo( 0, ypos );}, 20 );},setTouchHeight :函数(时间){设置超时(功能(){var footerHeight = (utils.notStandalone())?44:0;$('.mobile-touch-overflow').height(utils.getScreenHeight()-footerHeight);}， 时间 );},非独立:函数(){return ((window.navigator 中的独立") && !window.navigator.standalone);},propExists :函数(道具){var fakeBody = $( "" ).prependTo( "html"),fbCSS = fakeBody[0].style,供应商 = [ "Webkit", "Moz", "O" ],uc_prop = prop.charAt( 0 ).toUpperCase() + prop.substr(1),props = ( prop + " " + vendor.join( uc_prop + " ") + uc_prop ).split( " ");for ( var v in props ){if ( fbCSS[ props[ v ] ] !== undefined ) {fakeBody.remove();返回真；}}},隐藏地址栏:函数(){if(utils.supportTouchOverflow()){utils.setTouchHeight(0);}utils.windowScroll(1);}};//实用程序结束//窗口加载$(window).load(function(){utils.hideAdressbar();});$(document).ready(function(){utils.init();});<身体><div class="page-wrapper mobile-touch-overflow"><header class="page-header">Header<footer class="page-footer">Footer</footer>
I want to kind of continue some other Question:
How does jquery mobile hide mobile safari's addressbar?
this hides the adressbar after page is loaded.
But, here my new question:
if i scroll up to reshow the adressbar, the adressbar doesn't hide when you scroll down the page.
so, basically i want to hide the adressbar when the page is scrolling down.
解决方案
SOLUTION
i thought about the scroll position and ended up with this:
var touchHeight = $('.mobile-touch-overflow').height(),
screenHeight = utils.getScreenHeight() - (utils.notStandalone()?44:0);
// touchOverflow: hide adressbar when scrolling
if(touchHeight > screenHeight && utils.supportTouchOverflow())
{
$('.mobile-touch-overflow').bind('touchmove',function(){
if($('.page-content').offset().top < 0)
{
utils.windowScroll(1);
}
return true;
});
}
and here the test file:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- viewport -->
<meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<!-- webapp -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type='text/css'>
body {
background: #E0E0E0;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.page-wrapper {
width: auto;
}
/* native overflow scrolling */
.mobile-touch-overflow {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.mobile-touch-overflow,
.mobile-touch-overflow * {
/* some level of transform keeps elements from blinking out of visibility on iOS */
-webkit-transform: rotateY(0);
}
.page-header {
display: block;
background: gray;
border-bottom: 1px solid #CDCDCD;
padding: 10px;
}
.page-content {
padding: 10px;
}
.page-footer {
display: block;
border-top: 1px solid #CDCDCD;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
padding-left: 0;
padding-right: 0;
text-align: center;
font-size: 12px;
color: #FFF;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
/*
* utils
*/
var utils = {
init : function(){
var touchHeight = $('.mobile-touch-overflow').height(),
screenHeight = utils.getScreenHeight() - (utils.notStandalone()?44:0);
// touchOverflow: hide adressbar when scrolling
if(touchHeight > screenHeight && utils.supportTouchOverflow())
{
$('.mobile-touch-overflow').bind('touchmove',function(){
if($('.page-content').offset().top < 0)
{
utils.windowScroll(1);
}
return true;
});
}
},
supportTouchOverflow : function(){
return !!utils.propExists( "overflowScrolling" );
},
supportOrientation : function(){
return ("orientation" in window && "onorientationchange" in window);
},
//simply set the active page's minimum height to screen height, depending on orientation
getScreenHeight : function(){
var orientation = utils.getOrientation(),
port = orientation === "portrait",
winMin = port ? 480 : 320,
screenHeight = port ? screen.availHeight : screen.availWidth,
winHeight = Math.max( winMin, $(window).height() ),
pageMin = Math.min( screenHeight, winHeight);
return pageMin;
},
getWindowHeight : function(){
return window.innerHeight ? window.innerHeight : $(window).height();
},
// Get the current page orientation. This method is exposed publicly, should it
// be needed, as jQuery.event.special.orientationchange.orientation()
getOrientation : function() {
var isPortrait = true,
elem = document.documentElement,
portrait_map = { "0": true, "180": true };
// prefer window orientation to the calculation based on screensize as
// the actual screen resize takes place before or after the orientation change event
// has been fired depending on implementation (eg android 2.3 is before, iphone after).
// More testing is required to determine if a more reliable method of determining the new screensize
// is possible when orientationchange is fired. (eg, use media queries + element + opacity)
if ( utils.supportOrientation() ) {
// if the window orientation registers as 0 or 180 degrees report
// portrait, otherwise landscape
isPortrait = portrait_map[ window.orientation ];
} else {
isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
}
return isPortrait ? "portrait" : "landscape";
},
windowScroll : function(ypos) {
setTimeout(function() {
window.scrollTo( 0, ypos );
}, 20 );
},
setTouchHeight : function(time) {
setTimeout(function() {
var footerHeight = (utils.notStandalone())?44:0;
$('.mobile-touch-overflow').height( utils.getScreenHeight() - footerHeight );
}, time );
},
notStandalone : function(){
return (("standalone" in window.navigator) && !window.navigator.standalone);
},
propExists : function(prop) {
var fakeBody = $( "<body>" ).prependTo( "html" ),
fbCSS = fakeBody[ 0 ].style,
vendors = [ "Webkit", "Moz", "O" ],
uc_prop = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
props = ( prop + " " + vendors.join( uc_prop + " " ) + uc_prop ).split( " " );
for ( var v in props ){
if ( fbCSS[ props[ v ] ] !== undefined ) {
fakeBody.remove();
return true;
}
}
},
hideAdressbar : function(){
if(utils.supportTouchOverflow()){
utils.setTouchHeight(0);
}
utils.windowScroll(1);
}
};//utils end
// WINDOW LOAD
$(window).load(function(){
utils.hideAdressbar();
});
$(document).ready(function(){
utils.init();
});
</script>
</head>
<body>
<div class="page-wrapper mobile-touch-overflow">
<header class="page-header">Header</header>
<div class="page-content">
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###<br>###
</div>
<footer class="page-footer">Footer</footer>
</div>
</body>
</html>
这篇关于滚动时隐藏移动 Safari 中的地址栏(touchOverflow)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
