在iOS7固定报头和页脚网页上滚动的问题

本文介绍了在iOS7固定报头和页脚网页上滚动的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

这将是我很难解释，但我会尝试：作为一个开始，我的网页是工作在iOS6.x，Android的，W7和桌面浏览器IE9，Safari和Chrome mobilebrowser。该问题发生在iOS7苹果的移动Safari浏览器。我有一个棘手的页脚和虚拟键盘有问题，但得到有效解决here

现在我在页面上滚动时已经出现问题。当向下滚动，通常导航栏将隐藏和地址栏将缩小在iOS7。这不发生的情况。固定页眉和页脚的内容被滚动，但内容的底部由页脚和导航条重叠。我已经等待滚动停止之前，我可以再次向下滚动。然后，地址栏就会萎缩，导航栏将隐藏和底部的内容将显示。当我在我的页面的底部，要滚动备份，同样的事情发生，只是向上：滚动到顶部，头部和微小的地址栏重叠上的内容，等待滚动停止，然后再滚动到有地址栏扩大，导航栏，以显示和上要显示的内容。希望这一形象可以帮助：

下面是一些CSS code的：

*{ 保证金：0;填充：0; -webkit抽头高亮颜色：RGBA（0,0,0,0）;}HTML，身体{ 高度：100％; 保证金：0;}身体{ FONT-FAMILY：宋体，濑越UI，宋体，无衬线; 字体大小：130％; 背景图像：网址（'../图像/ background.png'）; 背景重复：重复; 溢出：隐藏;}的#header{ 文本对齐：中心; 颜色：#FFF; 高度：×45像素; 位置：固定; 的z-index：5; 顶：0像素; 宽度：100％; 顶部：0;左：0; 填充：0; 背景颜色：＃2785c7; / *旧的浏览器* / 背景：-moz线性梯度（顶，＃206493，＃2375ae，＃2785c7 85％）; / * FF3.6 + * / 背景：-webkit线性梯度（顶，＃206493，＃2375ae，＃2785c7 85％）; / * Chrome10 +，Safari5.1 + * / 背景：-o-线性梯度（顶，＃206493，＃2375ae，＃2785c7 85％）; / *歌剧11.10+ * / 背景：-ms线性梯度（顶，＃206493，＃2375ae，＃2785c7 85％）; / * IE10 + * / 背景：线性梯度（顶，＃206493，＃2375ae，＃2785c7 85％）; / * * W3C / 背景：-webkit梯度（线性，左上，左下，从（＃206493），以（＃2375ae），彩色停止（85％，＃2785c7））; / *铬，Safari4 + * / 过滤：进程id：DXImageTransform.Microsoft.gradient（startColorstr ='＃206493'，endColorstr ='＃2785c7'，GradientType = 0）; / * * IE6-9 /}#footer { 颜色：#CCC; 高度：48像素; 位置：固定; 的z-index：5; 底部：0像素; 宽度：100％; 填充左：2px的; 填充右：2px的; 填充：0; 边境顶：1px的固体＃444; 背景：＃222; / *旧的浏览器* / 背景：-webkit-梯度（线性，0 0 0 100％，色彩停止（0，＃999），颜色停止（0.02，＃666），颜色停止（1，＃222））; 背景：-moz线性梯度（顶，＃999，＃666的2％，＃222）; / * FF3.6 + * / 背景：-webkit线性梯度（顶，＃999，＃666的2％，＃222）; / * Chrome10 +，Safari5.1 + * / 背景：-o-线性梯度（顶，＃999，＃666的2％，＃222）; / *歌剧11.10+ * / 背景：-ms线性梯度（顶，＃999，＃666的2％，＃222）; / * IE10 + * / 背景：线性梯度（顶，＃999，＃666的2％，＃222）; / * * W3C /}#footer＆GT; DIV{ 高度：48像素;宽度：52px; 颜色：#AAACAF; 文本对齐：中心; 字体大小：0.55em; 显示：inline-block的; 光标：指针;}@media屏（最大宽度：350像素）/ * Mindre skiftPå美孚enheder * /{ #footer＆GT; DIV { 宽度：48像素; 字体大小：0.40em; }}#scroller{/ *最小高度：360像素; * / 填充顶：×45像素; 填充底：48像素; 溢出：隐藏; 宽度：100％;}

和这里有一些的HTML：

＆LT; HTML和GT; ＆LT; HEAD＆GT; ＆LT;标题＆GT;标题＆LT; /标题＆GT; ＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT; ＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展= 0，宽=设备的宽度，高度=设备高度/＆GT; ＆LT; META NAME =苹果移动网络应用能力的内容=YES/＆GT; ＆LT; META NAME =苹果的移动web应用程序状态栏式CONTENT =黑/＆GT; ＆LT;链接rel =苹果触摸图标的href =图像/ name.png/＆GT; ＆LT;链接rel =苹果触摸启动图像的href =图像/ startup.png/＆GT; ＆LT;链接rel =快捷方式图标的href =/图像/ name.ico/＆GT; ＆LT;链接HREF =？CSS /平方米的style.css＃= VERSION的rel =stylesheet属性类型=文/ CSS/＆GT; ＆LT;脚本SRC =JS / jQuery的-1.6.4.min.js方=＃版本？类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =JS / jquery.placeholder.js平方=＃版本？类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =JS / javascript.js平方=＃版本？类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本SRC =JS / divScroll.js平方=＃版本？类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本＆GT; $（函数（）{ $（输入[占位符]，textarea的[占位符]'）占位符（）。 }）; ＆LT; / SCRIPT＆GT; ＆LT; /头＆GT; ＆LT;身体GT; ＆LT;表ID =Form1的=服务器＆GT; ＆LT; DIV ID =头的风格=行高度：×45像素; =服务器＆GT; 名称＆LT; / DIV＆GT; ＆LT; DIV ID =卷轴＆GT; ＆LT; DIV ID =内容＆GT; ... ... ... ＆LT; / DIV＆GT; ＆LT; DIV ID =页脚的风格=文本对齐：中心＆GT; ＆LT; DIV ID =LoginNameLogoDiv＆GT;＆LT; IMG ALT =公司SRC =图像/ company_logo.png/＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; /表及GT; ＆LT; /身体GT;＆LT; / HTML＆GT;

解决方案

在IOS7结果错误的在iPad上，如果文档主体设置为100％的高度，内容向上由20像素在横向模式下移动。这可以通过在orientationChange事件调用window.scrollTo（0,0）被加工周围。的

您可以看一下这个博客里面提到什么是IOS7 www.mobilexweb/blog/safari-ios7-html5-problems-apis-review

This will be difficult for me to explain, but I'll try: As a start, my web page is working on mobilebrowser in iOS6.x, Android, W7 and desktop browser IE9, Safari and Chrome. The problem happens in Apple's mobile Safari browser in iOS7. I had a problem with a sticky footer and the virtual keyboard, but that got solved here

Now I've a problem when scrolling on the page. When scrolling down, normally the navigation bar will hide and the address bar will shrink on iOS7. This doesn't happens. The content between the fixed header and footer is scrolling, but the bottom of the content is overlapped by the footer and navigation bar. I've to wait for the scrolling to stop before I can scroll down again. Then the address bar will shrink, the nav bar will hide and the bottom content will show. When I'm at the bottom of my page and want to scroll back up, the same thing happens, just upwards: Scrolling to the top, the header and the tiny address bar overlaps the upper content, wait for the scrolling to stop, then scroll again to have the address bar expand, the nav bar to show and the upper content to show. Hope this image can help:

Here are some of the css code:

* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } html, body { height: 100%; margin: 0; } body{ font-family: Helvetica, Segoe UI, Arial, Sans-Serif; font-size: 130%; background-image: url('../images/background.png'); background-repeat:repeat; overflow:hidden; } #header { text-align: center; color:#FFF; height: 45px; position:fixed; z-index:5; top:0px; width:100%; top:0; left:0; padding:0; background-color:#2785c7; /* Old browsers */ background: -moz-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* IE10+ */ background: linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* W3C */ background: -webkit-gradient(linear, left top, left bottom, from(#206493), to(#2375ae), color-stop(85%, #2785c7)); /* Chrome,Safari4+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#206493', endColorstr='#2785c7',GradientType=0 ); /* IE6-9 */ } #footer{ color:#CCC; height: 48px; position:fixed; z-index:5; bottom:0px; width:100%; padding-left:2px; padding-right:2px; padding:0; border-top:1px solid #444; background:#222; /* Old browsers */ background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); background: -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */ background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */ background: linear-gradient(top, #999, #666 2%, #222); /* W3C */ } #footer > div { height:48px; width:52px; color:#AAACAF; text-align:center; font-size:0.55em; display:inline-block; cursor:pointer; } @media screen and (max-width: 350px) /* Mindre skift på mobil enheder */ { #footer > div { width:48px; font-size:0.40em; } } #scroller { /* min-height: 360px;*/ padding-top:45px; padding-bottom:48px; overflow:hidden; width:100%; }

And here are some of the HTML:

<html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="images/name.png" /> <link rel="apple-touch-startup-image" href="images/startup.png" /> <link rel="shortcut icon" href="/images/name.ico" /> <link href="css/style.css?square=#VERSION" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.6.4.min.js?square=#VERSION" type="text/javascript"></script> <script src="js/jquery.placeholder.js?square=#VERSION" type="text/javascript"></script> <script src="js/javascript.js?square=#VERSION" type="text/javascript"></script> <script src="js/divScroll.js?square=#VERSION" type="text/javascript"></script> <script> $(function() { $('input[placeholder], textarea[placeholder]').placeholder(); }); </script> </head> <body> <form id="Form1" runat="server"> <div id="header" style="line-height:45px;" runat="server"> Name </div> <div id="scroller" > <div id="content"> ... ... ... </div> <div id="footer" style="text-align:center"> <div id="LoginNameLogoDiv"><img alt="Company" src="images/company_logo.png" /></div> </div> </form> </body> </html>

解决方案

Bugs on IOS7 On iPad, if the document body is set to 100 percent height, content is shifted upwards by 20px in landscape mode. This can be worked around by calling window.scrollTo(0, 0) on the orientationchange event.

You can look to this blog which mention what are fallback in IOS7 www.mobilexweb/blog/safari-ios7-html5-problems-apis-review

更多推荐

在iOS7固定报头和页脚网页上滚动的问题