web-dev-qa-db-ja.com

モバイルブラウザーでのアドレスバーの非表示を防止する

現在、横長レイアウトのウェブサイトで作業しています。すべての要素は、JavaScriptを使用したposition：absoluteです。サイズはwindow.innerHeightで計算されます。私の問題は、要素がウィンドウの高さ以下であるにもかかわらず、スクロールダウンできることです（アドレスバーの高さ）。これは2つの点で迷惑です。まず、その時点では必要も必要もないウィンドウサイズ変更イベントをトリガーします。また、コンテンツを垂直方向にスクロールできるようにする必要がある一部のコンテンツボックスではうまく機能しません。ボックスをスクロールできる場合もありますが、ページ全体が最初にスクロールされる場合があります（前述のとおり、アドレスバーの高さ）。すべてのデバイスでこのアドレスバーの自動非表示メカニズムを防ぐことができる解決策はありますか？.

少し早いですがお礼を！

これはまったくスクロールできません： http://maxeffenberger.de/test.html

これは水平方向にスクロールできます（非表示のコンテンツを表示することは理にかなっています）。ただし、アドレスバーが非表示になるまで垂直方向にもスクロールできます（追加の「垂直」コンテンツはスペースを必要としないため、意味がありません： http：// maxeffenberger .de/test2.html

javascriptandroidcssgoogle-chromesafari
27
Max Effenberger

これは私がそれを達成した方法です：

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
  width: 50%;
  margin-left: 25%;
}
27
Submachine23

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

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

最も信頼できる解決策は、フルスクリーンAPIを使用することです： http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

0
Matt Gaunt

アドレスバーを非表示にしても問題が解決しない場合は、この方法でうまくいきました。

 html, body {
    height: 100%;
 }

 body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
        -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
 }

 .background {
    position: fixed;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
 }

私は多くの同様のコードを試してみましたが、Android chromeは私を殺していました。これだけが私にとってうまくいきました。ページの下部にナビゲーションがあるとき、それはその自動非表示バーの主要な問題。

0
Gh Doo