ios7safarimobile-safari

How to keep the safari toolbar and address bar display when user scrolled the page?

I use JQM make my mobile website. If I scroll page the tool bar at bottom will be hidden.How to keep it always display.

I use IOS version 7.0 JQM 1.3.2

Solution

  • I'm curious - why would you always want the toolbar and address bar displayed?

    Here's a fiddle shell demonstrating one way: http://fiddle.jshell.net/W93KY/show/

    HTML and CSS look like:

    html, body {
    height: 100%;
    overflow: hidden;
}

#Body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

<html>
    <body>
        <div id='Body'>
            Page content
        </div>
    </body>
</html>

    (Full fiddle to see code: http://jsfiddle.net/W93KY/)