happy cat image

everdevel

Brand New Day

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

스크롤 이벤트 생성

이번에는 스크롤 이벤트에 대해 알아보겠습니다.

우리가 웹서핑을 하면서 어떠한 목록을 볼 때 스크롤을 아래로 내리다보면 그 다음 데이터가 불러와지는걸 본 적 있을것입니다.

이럴때 스크롤 이벤트를 이용합니다.

스크롤이 페이지의 마지막 부근에 도달했을 때 작동하는것은 아니고 스크롤이 움직일 때마다 작동합니다.

scroll 이벤트 사용방법

document.addEventListener('scroll', function() {

});

현재의 스크롤 값을 확인하려면 다음의 코드를 사용합니다.

document.documentElement.scrollTop;

스크롤을 확인하려면 페이지가 길어야합니다. 임의로 div태그를 CSS를 사용해 길게 만들었습니다.

콘솔로그로 값을 확인하니 콘솔탭에서 스크롤을 움직여 값을 확인하시기 바랍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - onmouseover event</title>
<script>
    document.addEventListener('scroll', function() {
        var currentScrollValue = document.documentElement.scrollTop;
        console.log('currentScrollValue is ' + currentScrollValue);
    });
</script>
<style>
    div{height:2000px}
</style>
</head>
<body>
    <div></div>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

scroll event

봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준