Element auf Overscroll Bereich auf OS X zu erweitern

Question

Ich habe eine Seite mit einem festen Hintergrund und eine schwebende Fußzeile an der Unterseite.

Aufgrund von "Überrollen" auf OS X kann ein Benutzer am unteren Seitenrand vorbeirollen, wobei der Hintergrund unter der Fußzeile angezeigt wird. Anstelle von disabling overscroll für meine Seite, ich möchte einfach die untere div unter dem unteren Rand der Seite, um den Hintergrund zu decken.

Wie kann ich dies tun, ohne die Seitenhöhe zu erhöhen? Wenn ich die Größe der div anpassen, wird der scrollbare Bereich nur erweitert, um übereinzustimmen. Ich habe this question gesehen, aber das beinhaltet das Ausblenden des Elements, was bedeuten würde, dass es den Hintergrund nicht mehr abdeckt.

Gibt es eine Möglichkeit, Elemente im Overscroll-Bereich unter der Seite zu verbergen?

Hier ist ein GIF:

Sie können sehen, der Hintergrund unter dem weißen Bereich am unteren Rand des Bildschirms angezeigt wird, wenn Sie „Overscroll“. Ich will nicht das Überrollen verhindern, aber ich möchte den Hintergrund mit einem weißen div am Ende der Seite ausblenden.

Answer 1

Ohne eine Geige zu sehen, wäre mein erster Gedanke, genau das zu tun, was Sie erwähnt haben: Erhöhen Sie die Höhe der unteren div, um das übermäßige Scrollen abzudecken. Wie so:

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

Also, wenn Ihr unterer Behälter ist 400px:

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

So etwas in der Theorie funktionieren soll, solange es keine overflow: hidden auf der Seite aufgebracht ist.

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>