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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25298443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 04:19:22  来源:igfitidea点击:

Force address bar to show in mobile Chrome app

javascriptjquerycssgoogle-chromemobile

提问by anastasia

I'm working on a web app. Most of the app has scrolling disabled, however one fullscreen panel needs to be scrollable.

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

The problem:

问题:

If the user is in the part of the app that's scrollable, and scrolls down, the address bar disappears. If, after the address bar disappears, the user decides to exit that panel by clicking an X on the fixed-position menu bar, then the address bar never gets triggered (because scrolling up never happens) and so the user is stuck in a scroll-disabled address-bar-less state.

如果用户位于可滚动的应用程序部分并向下滚动,则地址栏将消失。如果在地址栏消失后,用户决定通过单击固定位置菜单栏上的 X 退出该面板,则地址栏永远不会被触发(因为永远不会发生向上滚动),因此用户会卡在滚动中-禁用无地址栏状态。

My question:

我的问题:

Is it possible to force trigger the address bar to show in Google Chrome?

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

Links!

链接!

JSBinoutput

JSB输出

JSBincode

JSB代码

btw

顺便提一句

Simply setting $(window).scrollTop(0) doesn't do it.

简单地设置 $(window).scrollTop(0) 并不能做到。

Emulating using dev tools doesn't work. You need to open it in a mobile device, in the chrome app.

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

Thanks!

谢谢!



Example below:

下面的例子:

No scrolling allowed, address bar showing

不允许滚动,显示地址栏

img1)

图片1)

Scrolling allowed, address bar showing

允许滚动,显示地址栏

img2

图像2

User scrolled, address bar hiding

用户滚动,地址栏隐藏

img3

img3

Go back to scrolling-disabled div, address bar is hidden

返回禁用滚动的 div,地址栏被隐藏

img4

img4

回答by Timo K?hk?nen

One workaround is to use a div as a scrollable container for body content. This way the body is not scrollable, but the inner div and Chrome doesn't autohide the address bar when this inner div is scrolled:

一种解决方法是使用 div 作为正文内容的可滚动容器。这样身体是不可滚动的,但是当这个内部 div 滚动时,内部 div 和 Chrome 不会自动隐藏地址栏:

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

Scroll bar visible: http://jsbin.com/zibewepiwo

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

Scroll bar auto hide: http://jsbin.com/yeyapijulo

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

Tested in Chrome Beta 44.0.2403.63 and Chrome 43.0.2357.93 in Android 4.4.2 (Samsung Galaxy Tab 3).

在 Android 4.4.2(三星 Galaxy Tab 3)的 Chrome Beta 44.0.2403.63 和 Chrome 43.0.2357.93 中测试。

回答by Vincent Lin

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;
}

referance from http://goratchet.com/examples/app-movies/

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

By chrome dev-tool, we could see source code.

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

回答by Kolors

Edit v2:One methodthat could potentially work is to use the 'Fullscreen API'and detect every time the user scrolls (using a jQuery method)- then tell the browser to exit fullscreen mode each time to keep the address bar. Bear in mind this is untested so tell me whether you have any luck with this method...

编辑 v2:一种可能有效的方法是使用“全屏 API”并检测每次用户滚动(使用 jQuery 方法)- 然后告诉浏览器每次都退出全屏模式以保留地址栏。请记住,这是未经测试的,所以请告诉我您是否对这种方法有任何运气...

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


Edit:Reading from the FAQpage for the mobile Chrome app it indicates that when scrolling the address bar is automatically disabled, though it doesn't specify any method for disabling this. Which further points to the conclusion that this isn't possible.

编辑:从移动 Chrome 应用程序的常见问题页面读取它表明滚动地址栏时会自动禁用,但它没有指定任何禁用此功能的方法。这进一步指出了这是不可能的结论。



While this might not be an answer to your issue I believe it's worth mentioning that many browsers ignore attempt to manually manipulate the way the browser works or displays, for specific security reasons - often related to phishing.

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

For this reason the ability to manipulate the address bar was disabled on the desktop version and although I haven't found a source yet identifying this ability on mobile Chrome I believe the ability will likely be the same.

出于这个原因,在桌面版本上禁用了操作地址栏的功能,虽然我还没有找到来源,但在移动 Chrome 上识别此功能,但我相信该功能可能是相同的。

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

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

回答by Nitesh S Chauhan

Use this style code on your page.Now your chrome url bar will not hide.It'll stop scrolling.

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

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

You can also see here

你也可以在这里看到