html – 在iOS7中使用固定页眉和页脚在网页上滚动问题

发布时间：2020-12-14 16:36:46 所属栏目：资源来源：网络整理

导读：这对我来说很难解释,但我会尝试：首先,我的网页正在开发iOS6.x,Android,W7和桌面浏览器IE9,Safari和Chrome中的mobilebrowser.问题发生在iOS7的Apple移动Safari浏览器中.我有一个粘性页脚和虚拟键盘的问题,但这解决了 here 现在我在页面上滚动时遇到问题.向

这对我来说很难解释,但我会尝试：
首先,我的网页正在开发iOS6.x,Android,W7和桌面浏览器IE9,Safari和Chrome中的mobilebrowser.问题发生在iOS7的Apple移动Safari浏览器中.我有一个粘性页脚和虚拟键盘的问题,但这解决了 here

现在我在页面上滚动时遇到问题.向下滚动时,通常导航栏将隐藏,地址栏将在iOS7上缩小.这不会发生.固定页眉和页脚之间的内容是滚动,但内容的底部与页脚和导航栏重叠.在我再次向下滚动之前,我要等待滚动停止.然后地址栏将缩小,导航栏将隐藏,底部内容将显示.当我在页面底部并想要向上滚动时,同样的事情发生,只是向上：滚动到顶部,标题和小地址栏重叠上部内容,等待滚动停止,然后再次滚动以显示地址栏,显示导航栏和显示的上部内容.
希望这张图片有所帮助：

以下是一些css代码：

* 
{
    margin: 0; padding: 0;
    -webkit-tap-highlight-color: rgba(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,#2785c7 85%); /* Chrome10+,Safari5.1+ */
    background:      -o-linear-gradient(top,#2785c7 85%); /* Opera 11.10+ */
    background:     -ms-linear-gradient(top,#2785c7 85%); /* IE10+ */
    background:         linear-gradient(top,#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,#222); /* Chrome10+,#222); /* Opera 11.10+ */
    background:     -ms-linear-gradient(top,#222); /* IE10+ */
    background:         linear-gradient(top,#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%;
}

以下是一些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>

解决方法

IOS7上的错误
在iPad上,如果文档正文设置为100％高度,则内容在横向模式下向上移动20px.这可以通过在orientationchange事件上调用window.scrollTo(0,0)来解决.

您可以查看此博客,其中提到了IOS7 http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review中的后备内容

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!