프론트엔드/Javascript

[Javascript] 스크롤 이벤트 (Scroll Event)

jinwanseo 2021. 3. 31. 22:44
728x90

Javascript 스크롤 이벤트 Scroll Event

 

마우스 스크롤 이벤트란?

마우스 스크롤을 움직였을때 발생하는 이벤트

  

 

  기본 구조

//스크롤 이벤트 추가 : 'scroll'
window.addEventListener('scroll',e=>{
	//스크롤 움직였을때 원하는 기능 삽입
});

 

  샘플예제

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Mouse Scroll Event Example</title>
</head>
<body>
  <h1>스크롤 이벤트</h1>
  <div style="height: 500vh;">
    
  </div>
  <script>
    window.addEventListener('scroll',e=>{
        console.log('스크롤 사용중');
    });
   </script>
</body>
</html>

 

  결과 출력

 

728x90