-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
강사님 질문있습니다.
20.12.17 21:45 작성 조회수 112
0
const calcValues = (values, currentYoffset)
calcValues 함수에 values 값이 제대로 들어가지 않습니다.
calcValues 함수 속에서 console.log(values, "작동") 을 기입해도 undefined라고 등장하고,
당연히 해당 함수를 돌릴때, 계속 아래와 같은 에러가 등장합니다.
Uncaught TypeError: Cannot read property 'length' of undefined
---
여기서 등장하는 length는
if (values.length === 3) {
이부분이라고 생각해주시면 감사하겠습니다.
아래 복사한 제 코드문입니다. 무엇이 잘못일까요...?
(() => {
let yOffset = 0; // window.pageYOffset 대신 사용할 변수
let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합
let currentScene = 0; // 현재 활성화된(눈 앞에 보고있는) 씬(scroll-section)
let enterNewScene = false;
const sceneInfo = [
{
// 0
type: "sticky",
heightNum: 5, // 모든 디스플레이 높이의 5배로 지정해준다.
scrollHeight: null,
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_in: [0, 1, { start: 0.1, end: 0.2 }],
messageB_Opacity_in: [0, 1, { start: 0.3, end: 0.4 }],
messageC_Opacity_in: [0, 1, { start: 0.5, end: 0.6 }],
messageD_Opacity_in: [0, 1, { start: 0.7, end: 0.8 }],
messageA_Opacity_out: [1, 0, { start: 0.25, end: 0.3 }],
messageB_Opacity_out: [1, 0, { start: 0.45, end: 0.5 }],
messageC_Opacity_out: [1, 0, { start: 0.65, end: 0.7 }],
messageD_Opacity_out: [1, 0, { start: 0.85, end: 0.9 }],
messageA_translateY_in: [20, 0, { start: 0.1, end: 0.2 }],
messageB_translateY_in: [20, 0, { start: 0.3, end: 0.4 }],
messageC_translateY_in: [20, 0, { start: 0.5, end: 0.6 }],
messageD_translateY_in: [20, 0, { start: 0.7, end: 0.8 }],
messageA_translateY_out: [0, -20, { start: 0.25, end: 0.3 }],
messageB_translateY_out: [0, -20, { start: 0.45, end: 0.5 }],
messageC_translateY_out: [0, -20, { start: 0.65, end: 0.7 }],
messageD_translateY_out: [0, -20, { start: 0.85, end: 0.9 }]
}
},
{
// 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")
}
}
];
/////////////////////////////////////////////////
const setLayout = () => {
// 각 높이 세팅
for (let i = 0; i < sceneInfo.length; i++) {
if (sceneInfo[i].type === "sticky") {
sceneInfo[i].scrollHeight =
sceneInfo[i].heightNum * innerHeight;
} else {
sceneInfo[i].scrollHeight =
sceneInfo[i].objs.container.style.offsetHeight;
}
sceneInfo[
i
].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;
}
totalScrollHeight = 0;
yOffset = window.pageYOffset;
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}`);
};
/////////////////////////////////////////////////
const calcValues = (values, currentYoffset) => {
let rv;
let scrollHeight = sceneInfo[currentScene].scrollHeight;
let scrollRatio = currentYoffset / scrollHeight;
console.log(currentYoffset);
if (values.length === 3) {
let partScrollStart = values[2].start * scrollHeight;
let partScrollEnd = values[2].end * scrollHeight;
const partScrollHeight = partScrollEnd - partScrollStart;
if (
currentYoffset >= partScrollStart &&
currentYoffset <= partScrollEnd
) {
rv =
((currentYoffset - partScrollStart) / partScrollHeight) *
(values[1] - values[0]) +
values[0];
} else if (currentYoffset < partScrollStart) {
rv = values[0];
} else if (currentYoffset > partScrollEnd) {
rv = values[1];
}
} else {
rv = scrollRatio * (values[1] - values[0]) + values[0];
}
return rv;
};
const playAnimation = () => {
const Values = sceneInfo[currentScene].values;
const objs = sceneInfo[currentScene].objs;
const currentYoffset = yOffset - prevScrollHeight;
const scrollHeight = sceneInfo[currentScene].scrollHeight;
const scrollRatio = currentYoffset / scrollHeight;
switch (currentScene) {
case 0:
console.log("0번입니다.", 0);
if (scrollRatio <= 0.24) {
objs.messageA.style.opacity = calcValues(
Values.messageA_Opacity_in,
currentYoffset
);
objs.messageA.style.transform = `translateY(
${calcValues(
Values.messageA_TranslateY_in,
currentYoffset
)}%
)`;
} else {
objs.messageA.style.opacity = calcValues(
Values.messageA_Opacity_out,
currentYoffset
);
objs.messageA.style.transform = `translateY(
${calcValues(
Values.messageA_TranslateY_out,
currentYoffset
)}%)`;
}
break;
case 1:
console.log("1번입니다.", 0);
break;
case 2:
console.log("2번입니다.", 0);
break;
case 3:
console.log("3번입니다.", 0);
break;
}
};
const scrollLoop = () => {
enterNewScene = false;
prevScrollHeight = 0;
for (let i = 0; i < currentScene; i++) {
prevScrollHeight += sceneInfo[i].scrollHeight;
}
if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) {
enterNewScene = true;
currentScene++;
document.body.setAttribute("id", `show-scene-${currentScene}`);
}
if (yOffset < prevScrollHeight) {
enterNewScene = true;
if (currentScene === 0) return;
currentScene--;
document.body.setAttribute("id", `show-scene-${currentScene}`);
}
if (enterNewScene) return;
playAnimation();
};
window.addEventListener("scroll", () => {
yOffset = window.pageYOffset;
console.log(yOffset);
scrollLoop();
});
window.addEventListener("load", setLayout);
window.addEventListener("resize", setLayout);
})();
답변을 작성해보세요.
1
1분코딩
지식공유자2020.12.28
에고 답변이 많이 늦었네요, 죄송! ^^;
혹시 해결 하셨을까요?
calcValues 함수에 이미 undefined 값이 들어와서 호출된 것이기 때문에 거기서 실마리를 찾는 것 보다는,
calcValues 함수를 호출하는 부분에서 찾는 것이 원인을 찾기가 수월하답니다.
잘못된 값(undefined)이 들어간 지점에서 그 값이 왜 잘못되었을까? 를 찾아보는 것이지요^^
playAnimation 함수의 calcValues 호출 부분에서
console.log('Values.messageA_Opacity_in : ' + Values.messageA_Opacity_in);
console.log('Values.messageA_TranslateY_in : ' + Values.messageA_TranslateY_in);
console.log('Values.messageA_Opacity_out : ' + Values.messageA_Opacity_out);
console.log('Values.messageA_TranslateY_out : ' + Values.messageA_TranslateY_out);
이런 식으로 출력을 해보면 opacity 들은 멀쩡하게 나오고 translateY 부분만 undefined 라고 나오는데요,
그럼 원인이 바로 translateY라는 것을 알 수가 있습니다.
원인은 바로,
위의 sceneInfo를 세팅하는 부분에서는 messageA_translateY_in 이렇게 t를 소문자로 하셨는데
아래 calcValues를 호출할 때는 messageA_TranslateY_in 이렇게 T 대문자를 사용해서 생긴 오류였습니다.
0
답변 2