Jquery One Page Scroll(학습 66일차 TIL)

김영진·2021년 9월 15일
0

210915 어제에 이어서 순수 제이쿼리로 원페이지 스크롤 구현을 완성해보고, 미리 디자인 작업을 해 놓았던 App랜딩페이지를 템플릿에 입히는 작업을 했다.

Must Remember

  • 마우스 휠을 한 번 굴릴때 효과를 넣기 위해서 제이쿼리 mousewheel script를 삽입해 준다.
  • mousewheel은 delta값을 기준으로 효과를 준다.
  • 스크롤을 할 때 떨리는 현상을 볼 수 있는데, 이는 preventDefault()로 잡을 수 있다.
$("#container > div").each(function(index) {
  $(this).attr("data-index", ht * index); // 각 div마다 data 값으로 윈도우 높이
});

$("#container > div").mousewheel(function(event, delta) {
  event.preventDefault();
  var divPos = parseInt($(this).attr("data-index"));

  if (delta > 0) {
    $("html, body").stop().animate({"scrollTop": divPos - ht}, 700, "linear");
  } else if (delta < 0) {
    $("html, body").stop().animate({"scrollTop": divPos + ht}, 700, "linear");
  } 
});
  • offset().top값을 이용하는 방법도 있는데, 처음과 끝 페이지에서 top값으로 인한 오류가 생긴다.
$("#container > div").mousewheel(function(event, delta) {
  event.preventDefault();
  if (delta > 0) {
    var prev = $(this).prev().offset().top;
    $("html, body").stop().animate({"scrollTop": prev}, 1000, "linear");
  } else if (delta < 0) {
    var next = $(this).next().offset().top;
    $("html, body").stop().animate({"scrollTop": next}, 1000, "linear");
  } 
});
profile
UI개발자 in Hivelab

0개의 댓글