Jquery mousewheel, scroll(학습 59일차 TIL)

210906 오늘도 지난주에 이어서 예제를 클론 코딩하며, 제이쿼리 마우스 휠, 스크롤 관련한 효과에 집중해서 학습했다.

Jquery Effect

// li를 클릭했을 때 스크롤이 움직이도록.
$(".gnb li").click(function () {
  let i = $(this).index(); // li의 index 번호를 이용
  let ht = $(window).height();
  let nowTop = i * ht;
  $("html, body").stop().animate({"scrollTop":nowTop}, 1000);
});

// section의 높이 값에 따라 li 효과 적용
$(window).scroll(function() {
  let scrTop = $(window).scrollTop();

  for (var k = 0; k < 4; k++) {
    if (scrTop >= ht*k && scrTop < ht*(k+1)) {
      $(".gnb li").removeClass("on");
      $(".gnb li").eq(k).addClass("on");
    }
  }
});

// 원 페이지 처럼 보이는 jquery.mousewheel 이벤트 추가
$("section").mousewheel(function(event, delta) {
  // 마우스 휠을 올렸을 때
  if (delta > 0) {
    let prev = $(this).prev().offset().top;
    $("html, body").stop().animate({"scrollTop":prev}, 500, "linear");
  } else if (delta < 0) { // 마우스 휠을 내렸을 때
    let next = $(this).next().offset().top;
    $("html, body").stop().animate({"scrollTop":next}, 500, "linear");
  }
});