인프런 커뮤니티 질문&답변
작성한 질문수
스크롤사이즈가 안줄어들어요 ㅠ
해결된 질문
작성
·
355
0
스크롤사이즈가 안줄어들어요 ㅠ
콘솔에 height사이즈는 출력잘되는데, 스크롤사이즈 줄이는문장을 입력하니까 안줄어드네용..
//타임라인만들기
(function(){
const sceneInfo = [
//스크롤섹션 객체 4개
//애니매이션효과 sticky, 없는애 normal
{
//0
type:'sticky',
heightNum:5, //브라우저높이의5배로 scrollheight세팅
scrollHeight: 0,
objs:{
container: document.querySelector('#scroll-section-0')
}
},
{
//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.length; i++){
sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;
sceneInfo[i].objs.container.style.height = '${sceneInfo[i].scrollHeight}px';
}
}
window.addEventListener('resize',setLayout);
setLayout();
})();//감싸고,함수바로호출됨
답변 2
1
1분코딩
지식공유자
setLayout 함수에서 ' 대신 `를 사용해주셔야 합니다~ (물결 ~ 이랑 같은 키에 있는 것)
자바스크립트 템플릿 문자열이라고 부르는 기능인데요,
``안에 문자열을 넣고, 그 안에 ${}에 변수 또는 값을 넣을 수 있는 형태입니다.
sceneInfo[i].objs.container.style.height = '${sceneInfo[i].scrollHeight}px';
를
sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;
로 바꾸어주세요~
제 채널의 아래 영상을 참고하셔도 좋습니다^^
https://youtu.be/OKSeTjcEU1U
0
