web-dev-qa-db-ja.com

モバイルにアドレスバーを表示するChromeアプリ

私はウェブアプリに取り組んでいます。ほとんどのアプリではスクロールが無効になっていますが、1つのフルスクリーンパネルをスクロール可能にする必要があります。

問題：

ユーザーがアプリのスクロール可能な部分にいて、下にスクロールすると、アドレスバーが非表示になります。アドレスバーが非表示になった後、ユーザーが固定位置メニューバーの[X]をクリックしてそのパネルを終了することを決定した場合、アドレスバーはトリガーされず（上にスクロールしないため）、ユーザーはスクロールに行き詰まります。 -無効なアドレスバーのない状態。

私の質問：

Google Chromeでアドレスバーを強制的に表示させることはできますか？

リンク！

JSBin 出力

JSBin コード

btw

$（window）.scrollTop（0）を設定するだけでは機能しません。

開発ツールを使用したエミュレーションは機能しません。 chromeアプリで、モバイルデバイスで開く必要があります。

ありがとう！

以下の例：

スクロールは許可されず、アドレスバーが表示されます

img1）

スクロール可能、アドレスバー表示

img2

ユーザーがスクロール、アドレスバーが非表示

img3

スクロールが無効になっているdivに戻ります。アドレスバーは非表示です

img4

javascriptjquerycssgoogle-chromemobile
18
anastasia

回避策の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

Chrome Beta 44.0.2403.63 and Chrome 43.0.2357.93 in Android 4.4.2（Samsung Galaxy Tab 3））でテスト済み。

5
Timo Kähkönen
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を使用すると、ソースコードを確認できます。

2
Vincent Lin

Edit v2：機能する可能性がある1つの method は、 'Fullscreen API'ユーザーがスクロールするたびに検出（jQueryメソッドを使用）-次に、ブラウザーにフルスクリーンモードを終了してアドレスバーを維持するように指示します。これは未テストであることを覚えておいてください。この方法で運があるかどうか教えてください...

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

編集：[〜＃〜] faq [〜＃〜] モバイルからの読み取りChromeアプリは、アドレスバーをスクロールすると自動的に無効になることを示していますが、無効にする方法は指定されていません。これは、これが不可能であるという結論をさらに示しています。

これはあなたの問題への回答ではないかもしれませんが、多くのブラウザは、特定のセキュリティ上の理由から、多くの場合フィッシングに関連するブラウザの動作や表示方法を手動で操作する試みを無視していることに言及する価値があると思います。

このため、デスクトップバージョンではアドレスバーを操作する機能が無効になっており、モバイルでこの機能を特定するソースはまだ見つかりませんでしたChrome機能はおそらく同じだと思います。

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

2
Kolors

このスタイルコードをページで使用します。これで、chrome URLバーが非表示にならず、スクロールが停止します。

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

あなたも見ることができます ここ

1
Nitesh S Chauhan