Javascript - onscroll(스크롤 이벤트 / 예제

728x90

서론

Javascript를 이용하면 동적인 웹페이지를 효과적으로 만들 수 있습니다.

그중 웹페이지 또는 어떤 스크롤을 할 수 있는 객체에서 스크롤을 하면 ~동작을 하는 기능 등을 말이죠.

가령 블로그나 아티클들을 제공하는 웹페이지를 보면 TOC(Table of contents)라는 자동 목차 생성 및 추적이 가능한 편의 기능을 볼 수 있습니다. 이런 기능들이 바로 스크롤이 동작하는 과정을 처리하기 때문입니다.

본문에서는 스크롤이 동작하는 과정을 Javascript에서 어떻게 처리할 수 있는지 알아보고 지난 포스트들에서 배웠던 내용들을 가지고 특정 본문이 있는 웹 문서의 스크롤 위치를 추적하는 예제를 하나 만들어 보도록 하겠습니다.

Object.oncroll

각각의 객체에는 onscroll 이벤트 메서드를 사용할 수 있습니다.

쉽게 말해서 스크롤이 존재하는 객체에서 스크롤이 동작하는 시점에 대한 이벤트를 제어하는 메서드가 존재합니다.

자세한 onscroll이벤트가 어떻게 생성되는지 궁금하시다면 여기를 참조하세요.

본문에서는 oncroll이벤트를 어떻게 사용하는지에 대해서 알아보겠습니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

위처럼 스크롤 이벤트를 사용할 수 있는 2개의 객체가 있습니다.

subarea객체에서의 스크롤 이벤트(subarea.onscroll)
웹 페이지 전체의 객체에서의 스크롤 이벤트(window.onscroll)

결국 객체에서. onscroll을 통해 객체의 스크롤이 동작하는 과정의 제어가 가능하게 됩니다.

window.onscroll 사용해보기

그럼 이제 window.onscroll이 무엇을 의미하는지 알 수 있습니다.

웹 페이지의 스크롤이 동작할 때 이벤트를 제어한다는 의미가 됩니다.

이제 간단한 예제를 통해서 onscroll 이벤트를 사용해보도록 합시다.

보통 onscroll 이벤트에 필요한 함수를 정의하여 사용합니다.

전체 HTML 예제 소스 확인하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 760px;
        }
    </style>
    <script>
        //웹 페이지의 스크롤 동작 이벤트 처리
        window.onscroll = function(){
            console.log("웹 페이지 스크롤이 움직엿습니다.");
        }
    </script>
</head>
<body>
    <h3>제목1</h3>
    <p>Cupidatat ullamco ut ex amet irure excepteur eiusmod. Nisi quis ad dolore adipisicing ullamco aute culpa aliquip commodo laboris ex dolor esse. Cillum nisi eiusmod commodo elit ex esse nisi. Ea qui magna nulla esse exercitation ut id laborum. Irure excepteur ex dolor ipsum qui magna.

Veniam officia velit id consequat quis do consequat minim commodo labore officia ad reprehenderit. Magna pariatur officia laborum reprehenderit amet ipsum velit veniam tempor fugiat. Laboris aliqua quis ullamco laborum. Culpa est laborum labore dolor excepteur nisi minim ea irure deserunt ad. Tempor do aliqua aliquip ipsum occaecat laborum mollit commodo eu reprehenderit dolore in eiusmod proident.

Commodo aliquip et sint eu sit reprehenderit. Do et veniam laborum sint incididunt. Cillum id irure ut labore magna eu excepteur ipsum pariatur irure tempor velit duis mollit.

Minim est sunt consectetur aute eu magna et. Adipisicing non veniam enim ea sit id esse nostrud veniam reprehenderit nulla irure laborum. Adipisicing laborum incididunt aliqua ex in adipisicing quis.

Adipisicing culpa commodo id officia cillum. Reprehenderit veniam cillum fugiat duis est nulla nostrud et cillum ullamco est anim officia. Voluptate sunt nisi aliquip et ad occaecat sit laborum commodo. Incididunt est commodo exercitation commodo veniam consectetur labore eu aute sint aute et ullamco consectetur.

Aliquip laborum magna proident qui cillum sunt exercitation occaecat velit fugiat nisi adipisicing aliqua consectetur. Elit nisi sunt minim nisi commodo. Velit sunt minim occaecat consequat culpa commodo voluptate culpa. Ipsum reprehenderit do veniam consequat cillum consectetur elit sint. Amet duis ex qui sint. Dolore quis pariatur deserunt et dolor irure ipsum aliquip amet.

Quis id laboris duis ea quis consectetur nisi in. Reprehenderit officia do labore reprehenderit occaecat do elit aute amet eu duis sint do. Velit exercitation laborum aute commodo qui aliqua officia incididunt cupidatat pariatur id. Voluptate duis pariatur do eiusmod. Pariatur sunt eiusmod quis ullamco nisi ullamco nisi quis. Reprehenderit pariatur irure amet incididunt magna consectetur.</p>
    <h3>제목2</h3>
    <p>Nisi non exercitation commodo laboris excepteur enim ut laboris adipisicing adipisicing. Aute cupidatat voluptate qui cupidatat anim veniam sunt qui fugiat et aute et esse culpa. Laboris reprehenderit officia aliquip aliquip dolore. Veniam eiusmod aliqua reprehenderit aliquip dolore esse ex cillum proident adipisicing voluptate cupidatat qui labore. Et consequat irure reprehenderit elit. Labore laborum minim deserunt laborum nulla ad irure adipisicing. Irure amet magna reprehenderit minim cupidatat.

Nisi do elit dolore ullamco incididunt mollit ex. Dolore eu tempor ullamco magna dolore sit. Ea aliquip eu ipsum fugiat veniam veniam et dolore consectetur.

Tempor esse cillum nostrud dolore. Deserunt reprehenderit eu occaecat enim irure eu Lorem eiusmod fugiat in proident excepteur. Reprehenderit nisi reprehenderit sit mollit laboris dolore dolor et.

In laborum cillum amet sit sunt esse laborum ad consequat magna. Duis consectetur do sint est excepteur esse commodo proident et elit ut. Non excepteur aliquip culpa veniam irure ea ipsum. Nulla esse et aute consectetur. Adipisicing nulla do dolore cillum. Consequat labore ex sunt ad reprehenderit proident officia anim incididunt fugiat excepteur.

Cillum elit aliquip quis laboris quis consectetur amet commodo ullamco est cupidatat magna nostrud. Nulla pariatur reprehenderit ex sint minim aliquip. Id mollit ad et est. Culpa sit nulla dolore magna qui fugiat proident pariatur esse aliqua fugiat. Occaecat ipsum laboris aliquip do ut commodo id. Occaecat ex consectetur cillum elit id in deserunt laboris mollit. Dolore incididunt nostrud labore do adipisicing sunt tempor proident id laborum sunt adipisicing quis laboris.

Ipsum cupidatat nostrud cupidatat cillum magna irure aute quis reprehenderit cillum aliquip fugiat. Occaecat labore veniam consequat culpa ipsum aliqua anim consequat incididunt adipisicing. Consectetur consectetur dolore magna ea nisi excepteur voluptate nisi consectetur reprehenderit exercitation in laborum dolore. Esse irure do sint officia ex aute et non qui. Proident ipsum laborum Lorem amet laboris. Aute sunt dolore consequat exercitation nulla amet proident eiusmod veniam Lorem. Nostrud qui ipsum qui incididunt sit et qui.

Ea veniam reprehenderit eu sint fugiat. Exercitation occaecat in et do proident sit culpa tempor tempor eu reprehenderit. Ipsum qui non ex eu minim duis elit ea cupidatat labore dolore. Laboris in ullamco commodo occaecat culpa voluptate irure excepteur do veniam amet deserunt aliqua excepteur.

Quis officia dolor minim eiusmod deserunt qui elit magna ipsum amet voluptate labore ut ut. Pariatur id deserunt voluptate elit. Dolore enim qui anim eu id exercitation aute veniam excepteur occaecat labore est mollit culpa. Ad commodo quis non consectetur aliqua amet adipisicing velit minim qui.

Velit velit occaecat deserunt do officia adipisicing dolor tempor adipisicing tempor officia. Irure adipisicing exercitation aliqua tempor. Labore duis consectetur deserunt duis reprehenderit. Esse eu magna culpa exercitation minim. Do mollit ad ullamco velit consectetur Lorem mollit. Proident aute labore nulla incididunt laboris esse aliqua irure enim.</p>
    <h3>제목3</h3>
    <p>Enim in enim do commodo laborum laborum aliqua. Occaecat ut laboris Lorem deserunt id deserunt. Irure excepteur esse pariatur ut anim. Culpa mollit Lorem consectetur pariatur tempor qui ea non consectetur.

Laboris qui mollit nostrud magna ex dolore velit et esse officia nulla deserunt eiusmod voluptate. Aute do velit dolore ea amet voluptate elit occaecat officia ut labore. Et duis occaecat laboris culpa nisi ea irure cillum mollit. Velit nulla enim voluptate magna excepteur. Velit Lorem irure officia elit irure excepteur ipsum fugiat magna. Sit nisi reprehenderit ullamco exercitation ipsum consequat reprehenderit labore pariatur ad nulla fugiat. Do minim pariatur eu aliquip consequat id voluptate.

Commodo laborum dolor elit voluptate sint Lorem laborum ad duis. Eu labore aliquip excepteur sunt exercitation voluptate occaecat laborum laboris eiusmod minim. Non exercitation et et aute tempor sit magna. Proident dolor adipisicing non pariatur sint amet. Incididunt cupidatat est esse eu sint dolore nisi deserunt. Velit incididunt magna sit sint duis aliquip commodo.

Sunt mollit ex commodo eiusmod sint. Voluptate consectetur mollit nisi commodo pariatur adipisicing incididunt nulla. Aute ad ad esse velit elit irure commodo enim tempor. Cillum dolor duis tempor tempor.

Deserunt nisi exercitation nostrud esse. Lorem ex deserunt do irure aliquip eu incididunt id ullamco commodo anim est nisi. Magna magna Lorem nulla incididunt ea laborum nisi cillum fugiat reprehenderit laborum Lorem sunt nostrud.

Velit veniam non labore exercitation aute velit dolore. Dolore consectetur aute Lorem deserunt sit laboris deserunt eu veniam culpa dolor velit id occaecat. Ut Lorem incididunt ad laborum laborum est minim anim proident exercitation.

Velit sint aliquip culpa elit Lorem excepteur qui. Ipsum laboris sint est pariatur officia qui laboris proident. Proident tempor tempor irure sunt qui culpa nostrud. Consequat occaecat reprehenderit aliqua cillum nulla eiusmod exercitation sit officia dolor. Duis exercitation consectetur magna esse mollit proident magna sunt laborum ullamco cillum.

Eu sint exercitation laborum laborum ea exercitation dolor. Ex consequat aliquip nisi anim incididunt nostrud est sunt laboris occaecat reprehenderit aliqua exercitation. Veniam fugiat minim esse consequat excepteur nulla. Fugiat elit non occaecat non aliqua eu. Fugiat aute commodo reprehenderit elit ut sint culpa veniam aliquip cupidatat eu consequat dolor ullamco. Amet anim aliquip nostrud culpa adipisicing. Id excepteur quis sit sunt qui anim ex.

Elit veniam do enim consectetur excepteur ipsum do esse nostrud consectetur mollit. Non Lorem velit et do. Ex aute eiusmod occaecat enim laborum mollit exercitation anim id dolor incididunt nostrud aliqua.

Lorem magna eu ullamco sint magna duis occaecat. Laboris magna ullamco aliquip Lorem deserunt. Ad commodo aute culpa proident ea nulla. Fugiat aute fugiat nostrud tempor pariatur elit voluptate aute excepteur ea magna. Velit fugiat ad esse qui ullamco eu minim do magna irure sunt. Commodo magna commodo veniam pariatur. Lorem aliqua do pariatur aliquip id officia nostrud eu aute tempor id irure magna irure.</p>
</body>
</html>

//웹 페이지의 스크롤 동작 이벤트 처리

window.onscroll = function(){
	console.log("웹 페이지 스크롤이 움직엿습니다".);
}

개발자 도구를 실행해 보면 console에 스크롤을 움직일 때마다 해당 명령을 수행하는 것을 볼 수 있습니다.

예제- 스크롤 위치 찾기

자, 이제 웹페이지의 스크롤 이벤트에 따른 처리를 하는 방법을 알았습니다.

그럼 현 웹브라우저에서 스크롤의 위치가 어딘지 확인하는 기능을 한번 부여해 보도록 합시다.

브라우저의 크기와, 웹페이지의 전체 크기를 알면 간단하게 계산이 가능합니다. 이 내용은 이전 포스트를 참조하세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 760px;
        }
    </style>
    <script>
        //웹 페이지의 스크롤 동작 이벤트 처리
        window.onscroll = function(){
            
            //전체 웹 페이지의 길이 
            let pageheight = document.documentElement.scrollHeight;
            //현 브라우저의 길이
            let viewheight = window.innerHeight;
            //현 스크롤 바의 위치
            let scrollpos = window.scrollY;

            //계산 값 출력하기
            console.log("현 브라우저의 길이 : "+viewheight);
            console.log("전체 웹페이지 길이 : "+pageheight);
            console.log("현 스크롤의 위치 : "+scrollpos);
            console.log("현 스크롤의 위치(비율) : "+((scrollpos/(pageheight-viewheight))*100));


        }
    </script>
</head>
<body>
    <h3>제목1</h3>
    <p>Cupidatat ullamco ut ex amet irure excepteur eiusmod. Nisi quis ad dolore adipisicing ullamco aute culpa aliquip commodo laboris ex dolor esse. Cillum nisi eiusmod commodo elit ex esse nisi. Ea qui magna nulla esse exercitation ut id laborum. Irure excepteur ex dolor ipsum qui magna.

Veniam officia velit id consequat quis do consequat minim commodo labore officia ad reprehenderit. Magna pariatur officia laborum reprehenderit amet ipsum velit veniam tempor fugiat. Laboris aliqua quis ullamco laborum. Culpa est laborum labore dolor excepteur nisi minim ea irure deserunt ad. Tempor do aliqua aliquip ipsum occaecat laborum mollit commodo eu reprehenderit dolore in eiusmod proident.

Commodo aliquip et sint eu sit reprehenderit. Do et veniam laborum sint incididunt. Cillum id irure ut labore magna eu excepteur ipsum pariatur irure tempor velit duis mollit.

Minim est sunt consectetur aute eu magna et. Adipisicing non veniam enim ea sit id esse nostrud veniam reprehenderit nulla irure laborum. Adipisicing laborum incididunt aliqua ex in adipisicing quis.

Adipisicing culpa commodo id officia cillum. Reprehenderit veniam cillum fugiat duis est nulla nostrud et cillum ullamco est anim officia. Voluptate sunt nisi aliquip et ad occaecat sit laborum commodo. Incididunt est commodo exercitation commodo veniam consectetur labore eu aute sint aute et ullamco consectetur.

Aliquip laborum magna proident qui cillum sunt exercitation occaecat velit fugiat nisi adipisicing aliqua consectetur. Elit nisi sunt minim nisi commodo. Velit sunt minim occaecat consequat culpa commodo voluptate culpa. Ipsum reprehenderit do veniam consequat cillum consectetur elit sint. Amet duis ex qui sint. Dolore quis pariatur deserunt et dolor irure ipsum aliquip amet.

Quis id laboris duis ea quis consectetur nisi in. Reprehenderit officia do labore reprehenderit occaecat do elit aute amet eu duis sint do. Velit exercitation laborum aute commodo qui aliqua officia incididunt cupidatat pariatur id. Voluptate duis pariatur do eiusmod. Pariatur sunt eiusmod quis ullamco nisi ullamco nisi quis. Reprehenderit pariatur irure amet incididunt magna consectetur.</p>
    <h3>제목2</h3>
    <p>Nisi non exercitation commodo laboris excepteur enim ut laboris adipisicing adipisicing. Aute cupidatat voluptate qui cupidatat anim veniam sunt qui fugiat et aute et esse culpa. Laboris reprehenderit officia aliquip aliquip dolore. Veniam eiusmod aliqua reprehenderit aliquip dolore esse ex cillum proident adipisicing voluptate cupidatat qui labore. Et consequat irure reprehenderit elit. Labore laborum minim deserunt laborum nulla ad irure adipisicing. Irure amet magna reprehenderit minim cupidatat.

Nisi do elit dolore ullamco incididunt mollit ex. Dolore eu tempor ullamco magna dolore sit. Ea aliquip eu ipsum fugiat veniam veniam et dolore consectetur.

Tempor esse cillum nostrud dolore. Deserunt reprehenderit eu occaecat enim irure eu Lorem eiusmod fugiat in proident excepteur. Reprehenderit nisi reprehenderit sit mollit laboris dolore dolor et.

In laborum cillum amet sit sunt esse laborum ad consequat magna. Duis consectetur do sint est excepteur esse commodo proident et elit ut. Non excepteur aliquip culpa veniam irure ea ipsum. Nulla esse et aute consectetur. Adipisicing nulla do dolore cillum. Consequat labore ex sunt ad reprehenderit proident officia anim incididunt fugiat excepteur.

Cillum elit aliquip quis laboris quis consectetur amet commodo ullamco est cupidatat magna nostrud. Nulla pariatur reprehenderit ex sint minim aliquip. Id mollit ad et est. Culpa sit nulla dolore magna qui fugiat proident pariatur esse aliqua fugiat. Occaecat ipsum laboris aliquip do ut commodo id. Occaecat ex consectetur cillum elit id in deserunt laboris mollit. Dolore incididunt nostrud labore do adipisicing sunt tempor proident id laborum sunt adipisicing quis laboris.

Ipsum cupidatat nostrud cupidatat cillum magna irure aute quis reprehenderit cillum aliquip fugiat. Occaecat labore veniam consequat culpa ipsum aliqua anim consequat incididunt adipisicing. Consectetur consectetur dolore magna ea nisi excepteur voluptate nisi consectetur reprehenderit exercitation in laborum dolore. Esse irure do sint officia ex aute et non qui. Proident ipsum laborum Lorem amet laboris. Aute sunt dolore consequat exercitation nulla amet proident eiusmod veniam Lorem. Nostrud qui ipsum qui incididunt sit et qui.

Ea veniam reprehenderit eu sint fugiat. Exercitation occaecat in et do proident sit culpa tempor tempor eu reprehenderit. Ipsum qui non ex eu minim duis elit ea cupidatat labore dolore. Laboris in ullamco commodo occaecat culpa voluptate irure excepteur do veniam amet deserunt aliqua excepteur.

Quis officia dolor minim eiusmod deserunt qui elit magna ipsum amet voluptate labore ut ut. Pariatur id deserunt voluptate elit. Dolore enim qui anim eu id exercitation aute veniam excepteur occaecat labore est mollit culpa. Ad commodo quis non consectetur aliqua amet adipisicing velit minim qui.

Velit velit occaecat deserunt do officia adipisicing dolor tempor adipisicing tempor officia. Irure adipisicing exercitation aliqua tempor. Labore duis consectetur deserunt duis reprehenderit. Esse eu magna culpa exercitation minim. Do mollit ad ullamco velit consectetur Lorem mollit. Proident aute labore nulla incididunt laboris esse aliqua irure enim.</p>
    <h3>제목3</h3>
    <p>Enim in enim do commodo laborum laborum aliqua. Occaecat ut laboris Lorem deserunt id deserunt. Irure excepteur esse pariatur ut anim. Culpa mollit Lorem consectetur pariatur tempor qui ea non consectetur.

Laboris qui mollit nostrud magna ex dolore velit et esse officia nulla deserunt eiusmod voluptate. Aute do velit dolore ea amet voluptate elit occaecat officia ut labore. Et duis occaecat laboris culpa nisi ea irure cillum mollit. Velit nulla enim voluptate magna excepteur. Velit Lorem irure officia elit irure excepteur ipsum fugiat magna. Sit nisi reprehenderit ullamco exercitation ipsum consequat reprehenderit labore pariatur ad nulla fugiat. Do minim pariatur eu aliquip consequat id voluptate.

Commodo laborum dolor elit voluptate sint Lorem laborum ad duis. Eu labore aliquip excepteur sunt exercitation voluptate occaecat laborum laboris eiusmod minim. Non exercitation et et aute tempor sit magna. Proident dolor adipisicing non pariatur sint amet. Incididunt cupidatat est esse eu sint dolore nisi deserunt. Velit incididunt magna sit sint duis aliquip commodo.

Sunt mollit ex commodo eiusmod sint. Voluptate consectetur mollit nisi commodo pariatur adipisicing incididunt nulla. Aute ad ad esse velit elit irure commodo enim tempor. Cillum dolor duis tempor tempor.

Deserunt nisi exercitation nostrud esse. Lorem ex deserunt do irure aliquip eu incididunt id ullamco commodo anim est nisi. Magna magna Lorem nulla incididunt ea laborum nisi cillum fugiat reprehenderit laborum Lorem sunt nostrud.

Velit veniam non labore exercitation aute velit dolore. Dolore consectetur aute Lorem deserunt sit laboris deserunt eu veniam culpa dolor velit id occaecat. Ut Lorem incididunt ad laborum laborum est minim anim proident exercitation.

Velit sint aliquip culpa elit Lorem excepteur qui. Ipsum laboris sint est pariatur officia qui laboris proident. Proident tempor tempor irure sunt qui culpa nostrud. Consequat occaecat reprehenderit aliqua cillum nulla eiusmod exercitation sit officia dolor. Duis exercitation consectetur magna esse mollit proident magna sunt laborum ullamco cillum.

Eu sint exercitation laborum laborum ea exercitation dolor. Ex consequat aliquip nisi anim incididunt nostrud est sunt laboris occaecat reprehenderit aliqua exercitation. Veniam fugiat minim esse consequat excepteur nulla. Fugiat elit non occaecat non aliqua eu. Fugiat aute commodo reprehenderit elit ut sint culpa veniam aliquip cupidatat eu consequat dolor ullamco. Amet anim aliquip nostrud culpa adipisicing. Id excepteur quis sit sunt qui anim ex.

Elit veniam do enim consectetur excepteur ipsum do esse nostrud consectetur mollit. Non Lorem velit et do. Ex aute eiusmod occaecat enim laborum mollit exercitation anim id dolor incididunt nostrud aliqua.

Lorem magna eu ullamco sint magna duis occaecat. Laboris magna ullamco aliquip Lorem deserunt. Ad commodo aute culpa proident ea nulla. Fugiat aute fugiat nostrud tempor pariatur elit voluptate aute excepteur ea magna. Velit fugiat ad esse qui ullamco eu minim do magna irure sunt. Commodo magna commodo veniam pariatur. Lorem aliqua do pariatur aliquip id officia nostrud eu aute tempor id irure magna irure.</p>
</body>
</html>

이후 해당 HTML 문서를 웹 브라우저에서 사용해보면 스크롤이 동작할 때마다 스크롤의 위치를 구할 수 있습니다.

728x90

'컴퓨터 > Javascript' 카테고리의 다른 글

Javascript - typeof 연산 ( 변수의 원형 파악하기) (0)	2022.06.09
Javascript - 요소의 추가 및 제거 하기 (+ 복사) (0)	2022.06.09
Javascript - 요소 선택하기 2 (Element, HTMLCollection, NodeList) (0)	2022.06.07
JavaScript - 요소 선택하기 (태그 선택하기) (0)	2022.06.02
Javascript - 화면, 웹페이지, 요소의 위치 (0)	2022.05.17