• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

질문있습니다.

20.10.12 10:19 작성 조회수 154

0

section을 3개로 하려고 했더니 오류가 나서 

다시 4개로 하면 

sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;

이부분에서 Cannot read property 'style' of null 라는 오류가 나거나 아래와 같은 오류가 납니다. 

ㅇㅓ디가 잘못된걸까요..?

(() => {
	const sceneInfo = [
		{
			//0
			type: 'normal',
			heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅
			scrollHeight : 0,
			objs:{ // html 객체 모음
				container : document.querySelector('scroll-section-0')
			}
		},
		{
			//1
			type: 'sticky',
			heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅
			scrollHeight : 0,
			objs:{ // html 객체 모음
				container : document.querySelector('scroll-section-1')
			}
		},
		{
			//2
			type: 'sticky',
			heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅
			scrollHeight : 0,
			objs:{ // html 객체 모음
				container : document.querySelector('scroll-section-2')
			}
		},
		{
			//3
			type: 'sticky',
			heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅
			scrollHeight : 0,
			objs:{ // html 객체 모음
				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.addEvnetListener('resize', setLayout);
	setLayout ();
})();

답변 3

·

답변을 작성해보세요.

0

Joungwoo Baik Baik님의 프로필

Joungwoo Baik Baik

2021.11.22

스펠링이 틀렸어요!

0

Joungwoo Baik Baik님의 프로필

Joungwoo Baik Baik

2021.11.22

window.addEventListener("resize", setLayout)

0

document.querySelector('scroll-section-0')

이 부분에서 #이 빠졌습니다. querySelector로 선택하실 때는 CSS 선택자를 그대로 넣어주어야해서,
id는 # 클래스는 . 을 붙여주셔야해요~
아래처럼 고쳐보세요.

document.querySelector('#scroll-section-0')