제이쿼리 스크롤 이벤트

제이쿼리 스크롤이벤트

$(window).scroll(함수);

$(window).on('scroll', 함수);

 

윈도우 화면에서 스크롤 진행 시 함수를 호출하는 이벤트 종류입니다.

다양한 스크롤 이펙트 기능을 연출할때 활용할 수 있습니다.

 

다음과 같은 HTML이 있을 경우

<p id="p1">test1</p>	
<p id="p2">test2</p>	
<p id="p3">test3</p>

모든 p를 숨김으로 설정하고,

$('p').hide();

다음과 같이 특정 스크롤이벤트 조건이 만족되었을 때 #p2를 나타나게 할 수 있습니다.

$(window).scroll(function(){		
	if($('body, html').scrollTop() > 50){	
		$('#p2').fadeIn();
	}	
})		

 

---

스크롤을 이용한 비디오 제어

$(window).scroll 이벤트를 활용 시 많은 웹에서 활용하는 스크롤 이동 시 동영상 재생, 정지 등의 기능또한 연출할 수 있습니다.

 

다음과 같은 HTML이 스크롤을 이동해야 보이는 위치에 있을 경우 

<video src="url" muted loop id="video"></video>

아래와 같은 속성과 메서드를 이용하여

$('#video').get(0).play();
$('#video').get(0).pause();

윈도우 스크롤과 함께 특정 조건에 따라 위 스크립트가 동작되게 제작할 수 있습니다. (위 #p2 예시를 참고하세요)

 

---

노드 클릭을 통한 스크롤 이동

$(window).scroll 이벤트가 아닌 특정 노드를 클릭 시 스크롤이 자동으로 이동되도록 설정할수도 있습니다. animate를 활용합니다.

 

다음과 같은 HTML이 작성된 경우

<button id="btn2">top</button>

다음과 같이 scrollTop을 활용하여 스크립트를 진행할 수 있습니다.

$('#btn2').click(function(){	
$('html,body').animate({	
	scrollTop:0
	},500)
})	

또는 특정 위치로 스크롤을 이동하고 싶을 때 먼저 변수에 다음과 같이 준비합니다.

var $offset = $('#p2').offset().top;

위 animate({ scrollTop : 위치에 #offset 변수를 삽입하여 #p2노드의 위치를 인식하여 이동할 수 있도록 제작합니다.