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

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 的这个 sn-p 来隐藏针对 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 );