JavaScript
스크롤 이벤트 생성
스크롤 이벤트 생성
이번에는 스크롤 이벤트에 대해 알아보겠습니다.
우리가 웹서핑을 하면서 어떠한 목록을 볼 때 스크롤을 아래로 내리다보면 그 다음 데이터가 불러와지는걸 본 적 있을것입니다.
이럴때 스크롤 이벤트를 이용합니다.
스크롤이 페이지의 마지막 부근에 도달했을 때 작동하는것은 아니고 스크롤이 움직일 때마다 작동합니다.
scroll 이벤트 사용방법
document.addEventListener('scroll', function() {
});
현재의 스크롤 값을 확인하려면 다음의 코드를 사용합니다.
document.documentElement.scrollTop;
스크롤을 확인하려면 페이지가 길어야합니다. 임의로 div태그를 CSS를 사용해 길게 만들었습니다.
콘솔로그로 값을 확인하니 콘솔탭에서 스크롤을 움직여 값을 확인하시기 바랍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pinkcoding - 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>
결과는 바로 아래에서 확인할 수 있습니다.
