<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 15px; line-height: 20px; white-space: pre;">
<div><span style="color: #d7ba7d;">.scroll-section</span> {</div>
<div>&nbsp; &nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">relative</span>;</div>
<div>&nbsp; &nbsp; <span style="color: #9cdcfe;">padding-top</span>: <span style="color: #b5cea8;">50vh</span>;</div>
<div>}</div>
</div>
<p>위와 같이 padding-top에 50vh를 넣고</p>
<p>setLayout함수에서&nbsp;</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 15px; line-height: 20px; white-space: pre;">
<div>&nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #c586c0;">if</span> (<span style="color: #4fc1ff;">sceneInfo</span>[<span style="color: #9cdcfe;">i</span>].<span style="color: #9cdcfe;">type</span> === <span style="color: #ce9178;">'sticky'</span>) {</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #4fc1ff;">sceneInfo</span>[<span style="color: #9cdcfe;">i</span>].<span style="color: #9cdcfe;">scrollHeight</span> = <span style="color: #4fc1ff;">sceneInfo</span>[<span style="color: #9cdcfe;">i</span>].<span style="color: #9cdcfe;">heightNum</span> * <span style="color: #9cdcfe;">window</span>.<span style="color: #9cdcfe;">innerHeight</span>;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } <span style="color: #c586c0;">else</span> <span style="color: #c586c0;">if</span> (<span style="color: #4fc1ff;">sceneInfo</span>[<span style="color: #9cdcfe;">i</span>].<span style="color: #9cdcfe;">type</span> === <span style="color: #ce9178;">'normal'</span>) &nbsp;{</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #4fc1ff;">sceneInfo</span>[<span style="color: #9cdcfe;">i</span>].<span style="color: #9cdcfe;">scrollHeight</span> = <span style="color: #4fc1ff;">sceneInfo</span>[<span style="color: #9cdcfe;">i</span>].<span style="color: #9cdcfe;">objs</span>.<span style="color: #9cdcfe;">content</span>.<span style="color: #9cdcfe;">offsetHeight</span> + <span style="color: #9cdcfe;">window</span>.<span style="color: #9cdcfe;">innerHeight</span> * <span style="color: #b5cea8;">0.5</span>;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #4fc1ff;">sceneInfo</span>[<span style="color: #9cdcfe;">i</span>].<span style="color: #9cdcfe;">objs</span>.<span style="color: #9cdcfe;">container</span>.<span style="color: #9cdcfe;">style</span>.<span style="color: #9cdcfe;">height</span> = <span style="color: #ce9178;">`</span><span style="color: #569cd6;">${</span><span style="color: #4fc1ff;">sceneInfo</span>[<span style="color: #9cdcfe;">i</span>].<span style="color: #9cdcfe;">scrollHeight</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">px`</span>;</div>
</div>
<p>sticky인 경우 innerHeight의 배수만큼만, normal인 경우 실제 높이에 50vh 만큼을 더해주고 있습니다.</p>
<p>질문1: 어짜피 setLayout에서 높이를 재설정하고 있는데 css에서 패딩을 주는 이유가 무엇일까요?</p>
<p>질문2: sticky와 normal에 50vh의 보정이 서로 다르게 들어가는 이유는 무엇일까요?</p>
<p>감사합니다~~</p>

Inflearn Community Q&A

50vh