왓챠 클론코딩 (풀페이지 스크롤)

플러그인을 쓰지 않고 풀페이지 효과 구현해보기

window.addEventListener("wheel", function(e){
	e.preventDefault();
},{passive : false});
// 기본 이벤트 제거

var $html = $("html");
var page = 1;
var lastPage = $(".content").length;

$html.animate({scrollTop:0},10);
// 페이지 선언

$(window).on("wheel", function(e){
 
	if($html.is(":animated")) return;
 
	if(e.originalEvent.deltaY > 0){
		if(page== lastPage) return;
 
		page++;
	}else if(e.originalEvent.deltaY < 0){
		if(page == 1) return;
 
		page--;
	}
	var posTop = (page-1) * $(window).height();
 
	$html.animate({scrollTop : posTop});
  // 마우스 휠을 굴렸을 때 이벤트 추가

    $(window).scroll(function(){
        var scroll = $(window).scrollTop();
        if (scroll > 1) {
          $("header").css("background" , "#000000");
        }
        else{
          $("header").css("background" , "transparent");   
        }
      })
 // 스크롤 하면 헤더 색상 변경 
});

추가해야 할 것

• 스크롤 될 때마다 active되는 pagenation