Be lazy, Be crazy

[기능클론] javascript 마우스 스크롤 이벤트 (스크롤 위치, 방향) 본문

기능클론

[기능클론] javascript 마우스 스크롤 이벤트 (스크롤 위치, 방향)

LAZY SIA 2022. 1. 6. 14:45
728x90
반응형

카카오 페이지 메인

카카오 홈페이지에 가면 스크롤에 따라 헤더가 바뀌는 것을 볼 수 있습니다

사용자의 스크롤 움직임을 이벤트로 감지해서 기능을 넣은 것 같아요

 

1) 스크롤 위치 얻기

- addEventListener 메서드로 scroll 이벤트 시 함수 실행하는 명령어 작성

- document.documentElement : 비어있지 않은 HTML 문서라면 항상 <html>(최상단요소)요소를 가리킴

- Element.scrollTop : 요소 최상단부터의 현재 수직 스크롤 위치를 얻음

- 콜백 함수 안에 변수 작성 시 스크롤할 때마다 실행하기 때문에 실시간으로 위치 얻어올 수 있음

document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;
    console.log(documentY);

}

2) 스크롤 방향 얻기

- current : 최초 문서를 열었을 때 스크롤 위치 얻어옴 (초기값 0)

- current = documentY; : 현재 위치를 current에 계속해서 덮어쓰기 (이 값이 기준이 됨)

- 기준과 비교했을 때 documentY가 증가했다면 스크롤은 아래로 이동한 것, 감소했다면 스크롤은 위로 이동한 것이라 할 수 있음

let current = document.documentElement.scrollTop || 0;
document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;

    documentY - current >= 0 ? console.log("아래로") : console.log("위로");
    current = documentY; // Update
});

3) 활용해보기

1. 구조잡기
- div 숨기기

2. 스크롤할 때 css 추가하기
- 현재 스크롤 위치 얻기
- 스크롤 시작하면 헤더에 border-bottom 주기

3. 특정 위치 아래에서 헤더가 사라지고, '오늘의 카카오'로 대체됨
- 특정 위치에서 헤더 없애기
- 헤더가 없어지기 직전에는 헤더 바로 아래에 있다가, 헤더가 없어지면 맨 위로 올라가는 '오늘의 카카오'

4. 위로 스크롤하면 어디서든 헤더가 다시 생김
- 스크롤 방향 감지하기
- 위로 갈 때 header { top:0; }, .wrap_tit { top:72px; } 으로 바꿔주기

5. 다시 특정 위치 위로 올라가면 '오늘의 카카오'는 사라지고 헤더만 남음

 

1. 구조 잡기

1.1 div 숨기기

[클론 페이지] '오늘의 카카오' 제거 전

⬇️

[클론 페이지] '오늘의 카카오' 제거 후

- 헤더만 보이게 하기 위해 '오늘의 카카오'가 있는 div에 dpnone 클래스를 부여

  (css에 .dpnone { display: none; } 되어 있어야 함)

2. 스크롤할 때 css 추가하기

2.1 현재 스크롤 위치 얻기

[클론 페이지] 현재 스크롤 위치 얻기

- scroll 이벤트리스너 추가

- 익명함수 안에 document.documentElement.scrollTop에 변수 선언 하여 콘솔 출력해보기

document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;
    console.log(documentY);

}

 

2.2 스크롤 시작하면 헤더에 border-bottom 주기

[클론 페이지] 스크롤에 따른 border-bottom

- 위치가 0이 아닐 때의 if문과, 다시 맨 위로 올라왔을 때 border-bottom을 다시 삭제해주기 위해서 else문 작성

[방법 1. css 직접 추가하기]

document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;
    if (documentY != 0) {
      $("header").css({ "border-bottom": "1px solid #eee" });
    } else {
      $("header").css({ "border-bottom": 0 });
    }
});

 

[방법 2. css를 가진 클래스 추가하기]

- 다른 요소에도 같은 속성값의 border-bottom을 이용한다면 사용하기 좋은 방법일 듯 합니다

.border-bt {
    border-bottom : 1px solid #eee;
}
document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;
    if (documentY != 0) {
      $("header").addClass("border-bt");
    } else {
      $("header").removeClass("border-bt");
    }
});

3. 특정 위치 아래에서 헤더가 사라지고, '오늘의 카카오'로 대체됨

3.1 특정 위치에서 헤더 없애기

[클론 페이지] 스크롤 위치 155 이상이 되면 사라짐

- 스크롤 위치가 155 이상이면 헤더를 위로 올려 사라지게함

- 헤더 높이가 72px 이므로 top : -73px;을 주어 위로 완전히 안보이도록 할것임

- transition과 클래스 추가 이용하기

- header의 css 속성 중 top에 transition을 주어 0에서 -73px이 될 때 스무스하게 올라가도록 설정

header {
/* ... */
    transition: top 0.2s ease-in-out;
}
document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;

// ...
    
    if (documentY > 155) {
        $("header").css({ top: "-73px" });
    }
});

 

3.2 헤더가 없어지기 직전에는 헤더 바로 아래에 있다가, 헤더가 없어지면 맨 위로 올라가는 '오늘의 카카오'

[클론 페이지] 스무스하게 올리기

- 스크롤 위치가 150일 때 등장 ( top: 72px인 상태로 높이가 72px인 헤더 바로 아래 붙어있음)

- 헤더가 사라지는 스크롤 위치인 155가 되면 top:-1px;이 되도록 설정

   (top : 0으로 하지 않은 이유는 깔끔함을 위해서)

- 마찬가지로 transition으로 스무스하게 올라가도록 함

- 주의 : header의 border-bottom이 보이려면 z-index는 header가 우선순위여야함

.wrap_tit {
/* ... */
    top: 72px;
    transition: top 0.2s ease-in-out;
}
document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;
    if (documentY != 0) {
      $("header").addClass("border-bt");
    } else {
      $("header").removeClass("border-bt");
    }
    
    if (documentY == 150) {
      $(".wrap_tit").removeClass("dpnone");
    }
    
    if (documentY > 155) {
        $("header").css({ top: "-73px" });
        $(".wrap_tit").css({ top: "-1px" });
    }
});

4. 위로 스크롤하면 어디서든 헤더가 다시 생김

4.1 스크롤 방향 감지하기

[클론 페이지] 위 아래 위위 아래

- 원래 스크롤 위치와 이벤트 후 스크롤 위치의 차를 이용하여 방향 감지

- current = documentY; 로 꼭 update를 해줘야 함

  let current = document.documentElement.scrollTop || 0;
  document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;

/* ... */

    documentY - current >= 0 ? console.log("아래로") : console.log("위로");
    current = documentY; // Update
  });

 

4.2 위로 갈 때 header { top:0; }, .wrap_tit { top:72px; } 으로 바꿔주기

[클론 페이지] 스크롤 올리면 다시 나타나는 헤더

  let current = document.documentElement.scrollTop || 0;
  document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;

/* ... */

  if (documentY - current < 0) {
      $("header").css({ top: 0 });
      $(".wrap_tit").css({ top: "72px" });
  }
    current = documentY; // Update
  });

5. 다시 특정 위치 위로 올라가면 '오늘의 카카오'는 사라지고 헤더만 남음

[클론 페이지] 완성!

- 원래 작성해둔 .wrap_tit의 dpnone 클래스를 지우는 if 문에 else 문 추가하면 될 것 같음

    if (documentY > 150) {
      $(".wrap_tit").removeClass("dpnone");
    } else { // 새로 작성
      $(".wrap_tit").addClass("dpnone"); // 새로 작성
    }

 

 

[전체 js 코드]

더보기
더보기 
  let current = document.documentElement.scrollTop || 0;
  document.addEventListener("scroll", function () {
    let documentY = document.documentElement.scrollTop;
    if (documentY != 0) {
      $("header").addClass("border-bt");
    } else {
      $("header").removeClass("border-bt");
    }

    if (documentY > 150) {
      $(".wrap_tit").removeClass("dpnone");
    } else {
      $(".wrap_tit").addClass("dpnone");
    }

    if (documentY > 155) {
      $("header").css({ top: "-73px" });
      $(".wrap_tit").css({ top: "-1px" });
    }

    if (documentY - current < 0) {
      $("header").css({ top: 0 });
      $(".wrap_tit").css({ top: "72px" });
    }
    current = documentY; // Update
  });
반응형

'기능클론' 카테고리의 다른 글

[기능클론] javascript 오늘 날짜, 요일 가져오기  (0) 2022.01.06
'기능클론' Related Articles more
Comments