스크롤이벤트 (2) 썸네일형 리스트형 <자바스크립트 기초> 18. 스크롤 이벤트 (2) * 지속적인 스크롤 이벤트 - 스크롤이 움직일 때마다 캐릭터가 움직이고 스크롤이 멈추면 캐릭터도 멈추는 이벤트를 만든다고 가정하자. - 이 때 스크롤 때마다 빈번히 일어나는 작업은 자칫하면 메모리를 엄청나게 잡아먹을 수 있다. 즉 스크롤이 움직일때마다 if문이 실행되고 멈추면 다른 if문이 실행되고, 계속 스크롤의 움직임을 확인한다든지 여러 경우가 있다. - 우리는 효율적인 작업을 위해 Timeout을 사용할 것이다. - 상태를 나타내기위해 scrollState라는 변수에 미리 false값을 담아두었다. 멈춘 것을 false로 표현하기 위함이다. - 캐릭터가 움직이는 것은 'moving'이라는 클래스를 추가하여 실행할 것이고, 스크롤이 멈추면 'moving'클래스를 제거하여 캐릭터를 멈출 것이다. Cha.. <자바스크립트 기초> 14. 스크롤 이벤트 (1) * 위치값 가져오기 - 스크롤 이벤트를 이용하려면 스크롤에 따라 변하는 위치값을 가져올 수 있어야 한다. - 먼저 전체 다큐먼트의 스크롤에 따른 위치값을 받아보자. (function() { const outputElem = document.querySelector('.output'); window.addEventListener('scroll', function() { outputElem.innerHTML = window.pageYOffset; }); })(); : 이벤트 리스너에 'scroll'을 입력함으로써 스크롤 이벤트를 받아올 수 있다. .pageYOffset 속성은 현재의 세로 위치 값을 픽셀단위로 표현한다. 위의 코드를 실행시키면 output이라는 클래스에 스크롤에 따라 변하는 위치값을 보이도록.. 이전 1 다음
