[Javascript DOM]Scroll 이벤트

728x90

See the Pen Untitled by namminimi (@namminimi) on CodePen.

스크롤 이벤트

1) 스크롤값 반환 document.documentElement.scrollTop;

ex)console.log(위에값)

2) document.addEvnetListener("scroll", function(){
스크롤 될때 동작하는 코드
}

3)스크롤 위치 이동

- window.scrollTo(xpos, ypos)

- window.scrollTo({top: 0, behavior: "smooth"})

scrollTo 메서드는 지정된 좌표로 스크롤해주는 기능(window는 생략가능)

behavior의 값에는 auto, instant, smooth가 있다. (문자이므로 따옴표가 필요하다.)
auto는 기본값이며, 바로 위치로 이동한다. instant도 같은 동작을 한다
smooth는 부드럽게 이동하는 애니메이션 효과를 보여준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        div {
            width: 100%;
            height: 100vh;
        }
 
        div:nth-child(2) {
            background-color: lightcoral;
        }
        div:nth-child(3) {
            background-color: lightcyan;
        }
        div:nth-child(4) {
            background-color: lightgreen;
        }
        #menu {
            position: fixed;
            width: 200px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
 
        #menu li {
            list-style: none;
            color: #fff;
            padding-left: 30px;
            line-height: 40px;
            transition: 0.5s;
            font-size: 24px;
        }
        #menu li.on {
            font-size: 32px;
        }
    </style>
</head>
<body>
    <ul id="menu">
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
    </ul>
    <div>box01</div>
    <div>box02</div>
    <div>box03</div>
    <script>
        let lis =document.querySelectorAll("li");
        //화면 100%높이값을 wh할당
        let wh = window.innerHeight;
       
      
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener("click", function(){
           window.scrollTo({top: i*wh, behavior: "smooth"});
         })
        }
 //li 클릭하면 스크롤 위치를 해당 위치로 이동
        // 스크롤 값에 따라서 해당하는 li에게 클래스on을 지정
        //0~1000 미만은 1번째 li에 on 클래스 지정
        // 1000~2000미만은 2번째 li에 on클래스 지정
        // 2000~ 3번째 li에 on클래스 지정

        document.addEventListener("scroll", function(){ 
            let sct = document.documentElement.scrollTop;
            console.log(sct);
           //스크롤 이벤트는 현재위치를 로그에 좌표처럼 찍어줌
            
            for (let i = 0; i<lis.length; i++) {
                if(sct >= wh*i && sct < wh*(i+1)) {
                lis.forEach(li=>li.classList.remove("on"));
                lis[i].classList.add("on");               
            }
            }
        })//sct 의 값이 0이상(크거나 같다) 이고            // wh보다 미만(작을 때) menu1에 on클래스 지정
    </script>
</body>
</html>
Colored by Color Scripter

cs

사용한 javascript

scroll 이벤트

-현재페이지-

click이벤트

2022.12.01 - [javascript HTML DOM] - 불 끄고 켜기 실습

document.querySelectorAll()

2022.12.03 - [javascript HTML DOM] - 자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력

window.innerHeight

.classList

.forEach

2022.12.04 - [javascript 기본문법] - 반복문2(for, for-in, for-of, .forEach)

728x90

'javascript > javascript HTML DOM' 카테고리의 다른 글

[javascript]화면에 나타내기(호출/출력) (0)	2022.12.04
[javascript]HTML 내용, 속성, 스타일 변경하기 (0)	2022.12.03
[javascript]html컬랙션 과 노드리스트 차이 & 배열과 유사배열의 차이 (0)	2022.12.03
[javascript]자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력 (0)	2022.12.03
[javascript]change이벤트 실습1 (0)	2022.12.03