full page 화면 짤림 현상..

[갓생 살고 싶은 사람]

full page를 적용시키고 싶어, scroll snap을 이용했는데 화면이 짤려져 있습니다.. 원인이 뭘까요?

const page = () => {
return (
<div class="container">
<Navbar id='navbar' />
<div className="section" id='hero'>
<Hero />
</div>
<div className="section" id='a'>

</div>
<div className="section" id='b'>
<b />
</div>
<div className="section" id='c'>
<c />
</div>
<div className="section" id='d'>
<d/>
</div>
<Footer className="section" id='Footer'/>
</div>
 )
 }
 
export default page;

css:

html, body {
height: 100vh;
margin: 0;
overflow:hidden;

 }

.container {
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth; 
scroll-snap-type: y mandatory;
 }

.section {
height: 100vh;
width: 100vw;
scroll-snap-align: start;
 }

[codingapple]

짤리는게 무엇이죠 container 왼쪽은 className으로 바꿉시다

[갓생 살고 싶은 사람]

className으로 바꾸니 실행이 안되서 class라고 썼었던건데, 한번 더 확인해보겠습니다.

맨 아래 사진보면 실제 페이지는 오른쪽 검은화면까지 포함되어야 하는데, 스크롤바 위치를 보시면 아시겠지만 저기까지만 화면에 표시가 됩니다..

snap-scroll을 사용해서 원페이지를 풀페이지로 바꾸려고 했는데,,, 너무 어려워서 ㅠㅠ 질문드렸습니다

[codingapple]

html파일에 붙여넣어보니까 잘되는데 이상한 컴포넌트나 스타일들 빼고 테스트해봅시다

[글쓴이]

글