地址栏在移动浏览器上始终可见

【问题标题】：Address bar always visible on mobile browsers地址栏在移动浏览器上始终可见
【发布时间】：2016-08-09 14:12:34
【问题描述】：

我试图让移动浏览器上的地址栏在滚动时保持可见，而不是最小化。有什么办法可以做到吗？

【问题讨论】：

您为什么要这样做？如果我作为用户希望地址栏始终可见，我会更改浏览器设置。
我想这样做是因为页外插页式广告。修复了移动设备上的背景图像，当您尝试滚动地址栏时，最小化并导致图像也移动。
插页式广告和削弱浏览器功能？似乎是不访问该网站的充分理由。但是，如果您真的想要插页式广告，为什么不在可见时禁用滚动？

【解决方案1】：

这里是 iOS 设备的示例，只需将您的 CSS 变量设置为此类。

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>

【讨论】：

感谢帮助我刚刚添加了这个 js 来阻止 safari 上的弹跳，它运行良好。 var xStart, yStart = 0; document.addEventListener('touchstart',function(e) { xStart = e.touches[0].screenX; yStart = e.touches[0].screenY; }); document.addEventListener('touchmove',function(e) { var xMovement = Math.abs(e.touches[0].screenX - xStart); var yMovement = Math.abs(e.touches[0].screenY - yStart) ; if((yMovement * 3) > xMovement) { e.preventDefault(); } });