[JavaScript/VanillaJS] 마우스 오버 및 휠 이벤트 (onmouseover, onmousewheel)

저번 포스팅(https://bejerry.tistory.com/8)에 이어서 계속 Sellery.me 클론을 해보려고 노력중입니다.

 

(하루가 지나고 이틀이 지났는데도 성과물이 없다.

여전히 휠 이벤트로 div이동을 못하고 있다ㅠㅠ)

 

그래도 나름 진전이 있었습니다.

---

HTML

index.html과 test.html은 같다.

 

---

JS

scroll.js와 test.js는 같다.

 

일단 내 마우스의 위치가 어떤 div에 있는지를 알아냈습니다.

현재 마우스가 읽을 수 있는 div는 가장 하위의 div(class="section-content")이기 때문에 부모를 호출해서 나눠야하고,

classList.js에선 각 div에게 다른 class name을 지정해주기 때문에 div를 구분할 수 있습니다.

 

소스를 컴파일하는 순서대로 가볼까요?

 

1. html을 전부 읽은 후 body가 끝나기 전, test.js(scroll.js)를 불러온다.

 

2. init() <-- init으로 처음 접근하고 init 함수를 호출한다.

 

3. getCurrentDivClassName() <-- init 함수에서는 getCurrentDivClassName() 젠장 길게도 지었네, 무튼 함수를 호출한다.

 

4. onMouseOver()에서 이벤트 객체의 target 속성을 통해 현재 위치를 알고 그 부모 Element를(?) 변수에 담는다.

 

5. 담은 부모의 class name 중에 지정한 배열의 값이 포함된 class name이 있으면 onMouseWheel 함수를 호출한다.

 

6. onMouseWheel 함수에서 이전 div와 다음 div의 값을 각각 변수에 담고, event 객체의 wheelDelta 값으로 위로 스크롤인지, 아래로 스크롤인지 구분 지을 수 있다.

 

---

결과물

스크롤을 위로 하면 이전 div가 없기 때문에 undefined를 내뱉고, "wheel up" string이 출력되고,

스크롤을 아래로 하면 다음 div인 sec1 DOM(?)이 출력되면서 동시에 "wheel down"이 출력됩니다.

 

 

---

 

아직 해결이 안된 부분은,

 

JS파일을 보면 offset이 안먹는다? 작동하지 않는다? 내가 뭘 잘못했다?

section보다 더 상위의 body나 html에서 animate 해야하나?

 

jQuery에선 이렇게 대부분 쓰던데, Vanilla로만 하려니 자료 찾기가 힘드네요ㅠㅠ (핑계 오지고요-)

<script>
    function fnMove(seq){
        var offset = $("#div" + seq).offset();
        $('html, body').animate({scrollTop : offset.top}, 400);
    }
</script>
출처: https://cofs.tistory.com/191 [CofS] 

혹시 이 글을 보시고 solution이 있으시면 댓글 좀 부탁드릴게요....ㅜㅜ

도와주세요;;;;ㅜㅜㅠㅍ퓨ㅠㅠ