Question

当您创建一个长基本页面并滚动它时，大多数移动浏览器会使用地址栏自动执行某些操作。例如在android chrome上，当你向下滚动时，地址栏会随着滚动消失。

如果你不滚动身体，是否可以达到同样的效果？例如，如果您的子级div包含的内容包含height: 100%和overflow: auto。

Answer 1

如果您想在iPhone上隐藏地址栏，可以使用：

<meta name="viewport" content="width=device-width, minimal-ui">

Android没有这样简单的解决方案，例如iPhone上的iOS 7，只有meta a标签。

您可以尝试使用Scott Jehl的此片段来隐藏定位iOS和Android的js栏。

/*! Normalized address bar hiding for iOS & Android (c) @scottjehl MIT License */
(function( win ){
    var doc = win.document;

    // If there's a hash, or addEventListener is undefined, stop here
    if(!win.navigator.standalone && !location.hash && win.addEventListener ){

        //scroll to 1
        win.scrollTo( 0, 1 );
        var scrollTop = 1,
            getScrollTop = function(){
                return win.pageYOffset || doc.compatMode === "CSS1Compat" && doc.documentElement.scrollTop || doc.body.scrollTop || 0;
            },

            //reset to 0 on bodyready, if needed
            bodycheck = setInterval(function(){
                if( doc.body ){
                    clearInterval( bodycheck );
                    scrollTop = getScrollTop();
                    win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
                }   
            }, 15 );

        win.addEventListener( "load", function(){
            setTimeout(function(){
                //at load, if user hasn't scrolled more than 20 or so...
                if( getScrollTop() < 20 ){
                    //reset to hide addr bar at onload
                    win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
                }
            }, 0);
        }, false );
    }
})( this );

滚动带溢出的子项时隐藏移动设备上的地址栏：auto

1 个答案: