OS X에서 오버 스캔 영역으로 요소 확장

Question

고정 된 배경과 하단에 떠있는 바닥 글이있는 페이지가 있습니다.

OS X에서 "overscrolling"때문에 사용자는 페이지 하단을지나 스크롤 할 수 있으며, 그 지점에서 배경이 바닥 글 아래에 표시됩니다. 내 페이지에 disabling overscroll 대신 페이지의 아래쪽에있는 하단 div을 배경으로 사용하기 만하면됩니다.

어떻게 페이지 높이를 늘리지 않고도이 작업을 수행 할 수 있습니까? div의 크기를 조정하면 스크롤 가능한 영역이 확장되어 확장됩니다. 나는 this question을 보았습니다.하지만 요소를 숨기면 더 이상 배경을 덮지 않습니다.

페이지 아래의 오버 스크롤 영역에서 요소를 숨기는 방법이 있습니까?

가 여기에 GIF입니다 :

당신은 배경 화면의 하단에있는 흰색 영역 아래에 표시 볼 수 있습니다 때 "오버 스크롤". 스크롤 오버를 방지하고 싶지는 않지만 페이지 하단의 흰색 div으로 배경을 숨기려고합니다.

Answer 1

바이올린을 보지 않고서는 처음 생각한 것은 당신이 말한 것과 정확히 일치하는 것입니다. 아래쪽 div의 높이를 늘려 과도한 스크롤을 처리하십시오. 그래서 같이 :

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

그렇다면 수익 컨테이너는 400 픽셀입니다 : 그런

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