-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
스크롤 영역이 이상하게 잡히고 스크롤 길이도 이상해졌는데 어디서 오류가 난 건지 알고 싶습니다
21.02.23 14:51 작성 조회수 302
0
잘 따라가고 있었는데 어디서부터인가 꼬여서 오류가 나네요... 선생님이 하신 소스코드 비교하면서 봤는데 제 눈에 오타나 오류가 안 보여서 질문 남깁니다 ㅠㅠ
(()=>{
let yOffset = 0; //window.pageYOffset 대신 쓸 변수
let prevScrollHeight = 0; //현재 스크롤 위치 (yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이의 합
let currentScene = 0; //현재 활성화된(눈 앞에 보고 있는) 씬(scroll-section)
const sceneInfo = [
{
//0
type: 'sticky',
heightNum: 5, //브라우저 높이의 5배로 srollHeight 세팅
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-0'),
messageA: document.querySelector('#scroll-section-0.main-message.a'),
messageB: document.querySelector('#scroll-section-0.main-message.b'),
messageC: document.querySelector('#scroll-section-0.main-message.c'),
messageD: document.querySelector('#scroll-section-0.main-message.d')
},
values:{
messageA_opacity:[0, 1]
}
},
{
//1
type: 'normal',
heightNum: 5,
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-1')
}
},
{
//2
type: 'sticky',
heightNum: 5,
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-2')
}
},
{
//3
type: 'sticky',
heightNum: 5,
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-3')
}
}
];
function setLayout(){
//각 스크롤 섹션의 높이 세팅
for(let i = 0; i < sceneInfo.lenght; i++) {
sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;
sceneInfo[i].objs.container.style.height =`${scrollHeight[i].scrollHeight}px`;
}
yOffset = window.pageYOffset;
let totalScrollHeight = 0;
for (let i = 0; i < sceneInfo.length; i++){
totalScrollHeight += sceneInfo[i].scrollHeight;
if(totalScrollHeight >= yOffset){
currentScene = i;
break;
}
}
document.body.setAttribute ('id', `show-scene-${currentScene}`);
}
function playAnimation(){
switch (currentScene){
case 0:
console.log('0 play');
break;
case 1:
console.log('1 play');
break;
case 2:
console.log('2 play');
break;
case 3:
console.log('3 play');
break;
}
}
function scrollLoop(){
prevScrollHeight = 0;
for(let i = 0; i < currentScene; i++) {
prevScrollHeight += sceneInfo[i].scrollHeight;
}
if(yOffset < prevScrollHeight + sceneInfo[currentScene].scrollHeight) {
currentScene++;
document.body.setAttribute ('id', `show-scene-${currentScene}`);
}
if (yOffset > prevScrollHeight){
if (currentScene === 0) return; //브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일)
currentScene--;
document.body.setAttribute ('id', `show-scene-${currentScene}`);
}
playAnimation();
}
window.addEventListener('scroll', () => {
yOffset = window.pageYOffset;
scrollLoop();
})
//window.addEventListener('DOMContentLoaded', setLayout);
window.addEventListener('load', setLayout);
window.addEventListener('resize', setLayout);
setLayout();
})();
//같은 말: (function())();
답변을 작성해보세요.
1
1분코딩
지식공유자2021.03.01
setLayout 함수에 오타가 좀 있네요~
잘못쓰신 부분은 주석처리 해두었으니, 함수를 비교해보세요.
// for(let i = 0; i < sceneInfo.lenght; i++) {
for(let i = 0; i < sceneInfo.length; i++) {
sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;
// sceneInfo[i].objs.container.style.height =`${scrollHeight[i].scrollHeight}px`;
sceneInfo[i].objs.container.style.height =`${sceneInfo[i].scrollHeight}px`;
}
답변 1