OS Xでオーバースクロール領域に要素を拡張

Question

私は、固定された背景と、下部に浮動フッタを持つページを持っています。

OS Xでは「オーバースキャン」のため、ユーザーはページの下部をスクロールすることができます。その時点で、背景がフッターの下に表示されます。私のページにはdisabling overscrollの代わりに、単に背景をカバーするために、ページの下部の下に一番下のdivを伸ばしたいと思っています。

ページの高さを上げずにこれを行うにはどうすればよいですか？ divのサイズを調整すると、スクロール可能領域がちょうど一致するように展開されます。私はthis questionを見たことがありますが、これは要素を隠すことを意味します。これは、もはや背景をカバーしないことを意味します。

オーバースクロール領域の要素をページの下に隠す方法はありますか？ここで

はGIFです：

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

Answer 1

フィディドを見ることなく、私が最初に考えたのはあなたが言ったことを正確に行うことでした。余分なスクロールをカバーするためにボトムdivの高さを上げてください。あなたの下のコンテナが400ピクセルであれば

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

：そう同様

.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>