在iOS7中具有固定页眉和页脚的网页上的滚动问题

Posted

技术标签:

【中文标题】在iOS7中具有固定页眉和页脚的网页上的滚动问题【英文标题】:Scrolling problems on a web page with fixed header and footer in iOS7 【发布时间】:2013-10-07 06:01:13 【问题描述】:

这对我来说很难解释,但我会尝试: 首先,我的网页在 ios6.x、android、W7 和桌面浏览器 IE9、Safari 和 Chrome 中的移动浏览器上运行。该问题发生在 iOS7 中 Apple 的移动 Safari 浏览器中。我遇到了粘页脚和虚拟键盘的问题,但问题得到了解决here

现在我在页面上滚动时遇到了问题。向下滚动时,通常导航栏会隐藏,地址栏会在 iOS7 上缩小。这不会发生。固定页眉和页脚之间的内容是滚动的,但内容的底部被页脚和导航栏重叠。我必须等待滚动停止,然后才能再次向下滚动。然后地址栏会缩小,导航栏会隐藏,底部的内容会显示出来。当我在页面底部并想要向上滚动时,会发生同样的事情,只是向上:滚动到顶部,标题和小地址栏与上部内容重叠,等待滚动停止,然后再次滚动以扩展地址栏、显示导航栏和显示上部内容。 希望这张图能帮到你:

下面是一些css代码:

* 

    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%;

以下是一些 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  src="images/company_logo.png" /></div>
            </div>
        </form>
    </body>
</html>

【问题讨论】:

相关文章:mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs 【参考方案1】:

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

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

【讨论】:

所以我的问题的答案是我必须等待苹果解决这个问题和其他 100 件事情? 不,有 hackfix 解决这个问题,您可以在横屏模式下使用window.scrollTo(0,0) 或额外添加20px 纵向模式怎么样?这会受到影响吗?您通常将 window.scrollto(0,0) 放在代码中的什么位置? @Arpit Srivastava,window.scrollTo(0,0) 不再适用于 ios 7,还有其他技巧吗?

以上是关于在iOS7中具有固定页眉和页脚的网页上的滚动问题的主要内容,如果未能解决你的问题,请参考以下文章

具有固定页眉和页脚以及可滚动内容的模态对话框

如何将 DiffUtil.Callback 与具有页眉和页脚的 RecyclerView 一起使用?

如何仅在正文上启用反弹过度滚动(而不是页眉和页脚)?

打印网页上的页眉和页脚如何设置

将导出查询作为带有页眉和页脚的文本访问

react.js - 处理固定页眉和页脚的 React-router