43

私は現在、水平レイアウトのウェブサイトに取り組んでいます。すべての要素は、javascript で position:absolute です。それらのサイズは、window.innerHeight で計算されます。私の問題は、要素がウィンドウの高さよりも高くないにもかかわらず、下にスクロールできることです (アドレスバーの高さ)。これは 2 つの点で厄介です。最初に、その時点では必要も必要もない window-resize イベントをトリガーします。次に、コンテンツを垂直方向にスクロール可能にする必要がある一部のコンテンツ ボックスではうまく機能しません。ボックスをスクロールできることもありますが、ページ全体が最初にスクロールされることもあります（前に述べたように、アドレスバーの高さ）。すべてのデバイスでこのアドレスバーの自動非表示メカニズムを防止できるソリューションはありますか?

少し早いですがお礼を！

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

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

4

10 に答える 10

46

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

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 */
}
于 2015-11-27T09:18:22.853 に答える
0

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

于 2013-08-08T09:46:07.863 に答える
-3

javascript window.scrollTo(0, 1); で 問題を解決できます。

ソリューションについては、 http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/をご覧ください。

于 2013-08-05T15:18:47.240 に答える