스크롤 섹션 2번째
강사님의 강의를 따라가면서 계속 듣다 보니 뭔가 이상한 점이 생겨서 알아보았습니다.
좌측은 제가 코딩을 하고 있는 부분(비디오 인터렉션 직전)이고 우측은 강사님이 작성하신 코드로 만들어진 예제에 제가 테두리 색을 넣은것 입니다
2번째 창에는 원래 보통 스크롤 영역이라고 표기된 저 nomal텍스트가 들어가는 걸로 알고 있는데 3번째 섹션[index 2번]에 들어가 있더라고요.
이게 어떤 이유인지 궁금해서 질문 남겼습니다
답변 1
1
앗.. 확인해보니 스크롤 섹션 자체의 높이로 잡다보니 높이 인식이 안전하게 처리가 안되는 걸로 보입니다.
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;정석님 덕분에 발견했네요^^; 감사합니다.
곧 소스코드도 업데이트 해두겠습니다^^
이미지 배경 문의
0
67
1
[크로스브라우징] safari에서 동영상 영역 미노출
0
107
1
항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~
0
109
2
vue강의는안하시나요?!
0
101
1
스크롤 속도에 따른 messageA_opacity_out
0
115
1
drawImage(objs.videoImages[sequence], 0, 0); error
0
89
1
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?
0
127
0
선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.
0
206
1
React에서 load 상태를 어떻게 감지할 수 있을까요?
0
679
1
[섹션7-3: 버그수정 2] tempYOffset 오류
0
195
1
스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?
0
313
2
게속 오류떠서 글 작성해봐요....
0
506
2
Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?
1
488
1
특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.
0
455
2
[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.
0
451
2
페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다
0
431
1
섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.
0
533
1
원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?
0
593
2
라이브러리 질문
1
412
2
translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데
0
409
1
[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ
0
598
2
scrollLoop 함수 질문
0
476
2
도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ
0
1235
2
load 이벤트시 첫 비디오 이미지가 뜨네요.
0
506
2