3

背景が固定で、下部にフローティング フッターがあるページがあります。

OS X の「オーバースクロール」により、ユーザーはページの下部を越えてスクロールでき、その時点で背景がフッターの下に表示されます。ページのオーバースクロールを無効にする代わりに、背景を覆うためにページの下部よりも下部を拡張したいだけですdiv。

ページの高さを増やさずにこれを行うにはどうすればよいですか? のサイズを調整するdivと、スクロール可能な領域がそれに合わせて拡大されます。この質問を見たことがありますが、それには要素を非表示にすることが含まれます。つまり、背景が覆われなくなります。

ページの下のオーバースクロール領域に要素を非表示にする方法はありますか?

ここにGIFがあります：

「オーバースクロール」すると、画面下部の白い領域の下に背景が表示されます。オーバースクロールを防ぎたくないのですdivが、ページ下部の白で背景を隠したいです。

4

1 に答える 1

1

フィドルを見ずに、私の最初の考えは、あなたが言及したことを正確に行うことです。余分なスクロールをカバーするために、下部の div の高さを増やします。そのようです：

.bottom-container {
  position: relative;
  height: /* current height + overflow amount of height */
  top: /* overflow amount of height */
}

したがって、下のコンテナが 400px の場合:

.bottom-container {
  position: relative;
  height: 600px;
  top: 200px;
}

overflow: hiddenそのようなものは、ページに適用されない限り、理論的には機能するはずです。

body {
  margin: 0;
  padding: 0;
}
.fixed-background {
  position: fixed;
  height: 100vh;
  width: 100%;
  background: tomato;  
}
.fixed-placeholder {
  height: 100vh;
  background: transparent;
}
.bottom-container {
  position: relative;
  height: 400px;
  width: 100%;
  background: white;
  top: 200px;
}
<div class="fixed-background">
  <h1>Fixed Background</h1>
</div>
<div class="fixed-placeholder"></div>
<div class="bottom-container">
  <h2>More content down here</h2>
</div>

于 2016-06-24T03:19:07.500 に答える