Question

我正在开发一个网络应用。大多数应用都禁用了滚动，但是一个全屏面板需要可滚动。

问题：

如果用户位于应用程序的可滚动部分，并向下滚动，则地址栏会消失。如果在地址栏消失后，用户通过单击固定位置菜单栏上的X决定退出该面板，则地址栏永远不会被触发（因为向上滚动不会发生），因此用户陷入滚动状态-disabled address-bar-less state。

我的问题：

是否可以强制触发地址栏以在Google Chrome中显示？

链接！

JSBin输出

JSBin代码

顺便说一句

只需设置$（窗口）.scrollTop（0）就不会这样做。

使用开发工具进行模拟并不起作用。您需要在Chrome应用中的移动设备中打开它。

谢谢！

以下示例：

不允许滚动，地址栏显示

）

允许滚动，地址栏显示

用户滚动，地址栏隐藏

返回滚动禁用div，地址栏隐藏

Answer 1

一种解决方法是使用div作为正文内容的可滚动容器。这样，正文不可滚动，但内部div和Chrome在滚动此内部div时不会自动隐藏地址栏：

<body style="margin:0;padding:0;width:100%;height:100%">
  <div style="position:absolute;width:100%;height:100%;overflow:scroll">
    Content
  </div>
</body>

滚动条可见： http://jsbin.com/zibewepiwo

滚动条自动隐藏： http://jsbin.com/yeyapijulo

在Android 4.4.2（三星Galaxy Tab 3）的Chrome Beta 44.0.2403.63和Chrome 43.0.2357.93中测试过。

Answer 2

编辑v2 ：可能有效的一个method是使用＆＃39;全屏API＆＃39; 并在每次用户滚动时检测（使用jQuery方法） - 然后告诉浏览器每次都退出全屏模式以保留地址栏。请记住这是未经测试的，所以告诉我你是否对这种方法有任何好运......

$(window).scroll(function(){
    document.webkitExitFullscreen();
    document.exitFullscreen();
});

修改：从移动Chrome应用的FAQ页面进行阅读，表明滚动地址栏时会自动停用，但不会指定任何禁用方法这个。这进一步指出了这是不可能的结论。

虽然这可能不是您问题的答案，但我相信值得一提的是，出于特定的安全原因，许多浏览器会忽略尝试手动操作浏览器的工作方式或显示方式 - 通常与网络钓鱼有关。

由于这个原因，在桌面版上禁用了操纵地址栏的功能，虽然我还没有找到一个在移动Chrome上识别此功能的来源，但我相信这种能力可能会相同。

https://bugzilla.mozilla.org/show_bug.cgi?id=337344

Answer 3

body {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

来自http://goratchet.com/examples/app-movies/

的侮辱

通过chrome dev-tool，我们可以看到源代码。

Answer 4

在页面上使用此样式代码。现在，您的Chrome浏览器网址栏不会隐藏。它将停止滚动。

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>

您还可以看到here

强制地址栏显示在移动Chrome应用中

4 个答案: