• 회원가입
  • 로그인

[DOM_Event] JS - scroll 이벤트 (= onscroll 속성) ★ - 스크롤이벤트

목차
  1. scroll 예제 - 스크롤 횟수
  2. scroll 정의
  3. scroll 구문
  4. scroll 예제 - 스크롤 스타일 변경

 

scroll 예제 - 스크롤 횟수

 

<style>

#hz {

  border: 1px solid silver;

  width: 300px;

  height: 100px;

  overflow: scroll;

}

#hz p {width:750px ; height:300px;}

</style>


<div id="hz" onscroll="homzzang()"><p>홈짱닷컴 Homzzang.com<p></div>

<p>Scroll 횟수 : <span id="demo">0</span></p>


<script>

var x = 0;

function homzzang() {

  document.getElementById("demo").innerHTML = x += 1;

}

</script>

 

결과보기

 

scroll 정의

 

요소 (가로・세로) 스크롤막대가 스크롤될 때 이벤트 발생

 


 

1.

CSS overflow 속성 이용해 스크롤막대 생성.

 

2.

주요 최신 브라우저 모두 지원.

 

3.

  • 이벤트확산 : X
  • 취소가능성 : X
  • 이벤트타입 : 사용자 인터페이스에서 생성되면 UiEvent, 그렇지 않으면 Event.
  • 지원 HTML : <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
  • DOM 버전 : Level 2 Events

 

 

scroll 구문 

 

[HTML 속성 이용 방식]

<element onscroll="homzzang()">

 

[JS 속성 이용 방식]

object.onscroll = function(){homzzang()};

 

[JS 메서드 이용 방식]

object.addEventListener("scroll", homzzang);

 


PS.

 

※ homzzang : 실행함수명.


※ addEventLister() 방식 주의사항 2가지

ⓘ 이벤트명에 on 안 붙임.  

② 실행함수명 뒤에 소괄호 안 붙임.


※ addEventListener() 메서드는 IE8 이하 브라우저는 지원 X.

 


scroll 예제 - 스크롤 스타일 변경

[방법1] - 클래스 추가/제거

 

<style>

body {height: 1000px;}

#hz {position: fixed}

.hz_style {font-size:30px; background-color: yellow;}

</style>


<body>  

  <p id="hz">홈짱닷컴 Homzzang.com</p>


  <script>

  window.onscroll = function() {homzzang()};


  function homzzang() {

    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {

       document.getElementById("hz").className = "hz_style";

    } else {

       document.getElementById("hz").className = "";

    }

  }

  </script>  

</body>

 

결과보기


[방법2] - 스타일 속성 개별 변경

 

<style>

body {overflow: scroll; height: 1000px; position:relative}    

.hz {position:absolute; top:300px; border:1px solid black; margin: 0 auto; width: 0px;height: 0px; display:none;}

</style>


<body onload="scrollDetect()">

    <div class="hz">홈짱닷컴 Homzzang.com</div>


    <script>

        function scrollDetect() {

            let div = document.querySelector('.hz')

            var lastScroll = 0;

            window.onscroll = function () {

                let currentScroll = document.documentElement.scrollTop; // Get Current Scroll Value

                if (currentScroll > 0 && lastScroll <= currentScroll) {

                    lastScroll = currentScroll;

                    div.style.width = '80%'

                    div.style.height = "100px";

                    div.style.background = "red";

                    div.style.position = "absolute";

                    div.style.top = "300";

                    div.style.left = "0";

                    div.style.display = "block";

                } else {

                    lastScroll = currentScroll;

                    div.style.display = "none";

                }

            };

        }

    </script>

</body>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012