-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
스크롤 섹션 2번째
20.11.11 15:49 작성 조회수 120
0
강사님의 강의를 따라가면서 계속 듣다 보니 뭔가 이상한 점이 생겨서 알아보았습니다.
좌측은 제가 코딩을 하고 있는 부분(비디오 인터렉션 직전)이고 우측은 강사님이 작성하신 코드로 만들어진 예제에 제가 테두리 색을 넣은것 입니다
2번째 창에는 원래 보통 스크롤 영역이라고 표기된 저 nomal텍스트가 들어가는 걸로 알고 있는데 3번째 섹션[index 2번]에 들어가 있더라고요.
이게 어떤 이유인지 궁금해서 질문 남겼습니다
답변을 작성해보세요.
1
1분코딩
지식공유자2020.11.12
앗.. 확인해보니 스크롤 섹션 자체의 높이로 잡다보니 높이 인식이 안전하게 처리가 안되는 걸로 보입니다.
type: 'normal'인 섹션의 높이를 가져오는 문제인데요, 섹션 자체로 높이를 인식하지 않고 안의 콘텐츠로 인식하면 확실하게 잡을 수 있습니다.
sceneInfo의 두번째 섹션의 objs에 아래와 같이 content를 추가해 주시고,
{
// 1
type: 'normal',
// heightNum: 5, // type normal에서는 필요 없음
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-1'),
content: document.querySelector('#scroll-section-1 .description')
}
},setLayout 함수의 이 부분을
sceneInfo[i].scrollHeight = sceneInfo[i].objs.container.offsetHeight;이렇게 바꾸어주시면 영역이 올바르게 잡힐거에요(기본 패딩 50vh가 있어서, 브라우저 높이의 0.5배도 더해주었습니다).
sceneInfo[i].scrollHeight = sceneInfo[i].objs.content.offsetHeight + window.innerHeight * 0.5;정석님 덕분에 발견했네요^^; 감사합니다.
곧 소스코드도 업데이트 해두겠습니다^^
답변 1