[ JS / jQuery ] 화나서 직접 만든 원페이지 스크롤

검색해보면 좋은 원페이지 스크롤 플러그인들이 많다...

잘 만들었지만.. 내가 원했던건 원페이지 스크롤과 일반 스크롤이 합쳐진 것..

그러니까 원페이지로 잘 가다가 특정 부분에선 일반 스크롤이 되었으면 했던 것🤔

(할꺼면 다 똑같은 원페이지로 하지 ㅠㅠ)

 

유명했던 fullpage.js랑 하나 더 사용해봤지만 원페이지 스크롤에서 일반 스크롤로 넘어갈때 자연스럽지 않고 덜덜 거리는 현상이 생겨서 처음에 직접만들다가 실패하고 이번에 다시 차근차근 생각해서 만들어봤다.

 

매번 말하지만 아직 초보라 미흡한 부분이 많다. 피드백은 항상 감사하다 :)

 

 

전체 코드 ✌️

var total_section = 0; //전체 원페이지 수
var current_idx = 0;
var screen_h = 0; // 화면 높이
var page_h = 0;
var last_y = 0; // 스크롤 마지막 하단 높이
var onpage_on = true;
var isScroll = false;

$(document).ready(function(){
	
	init();
	
		
	// Scroll Event
	$('#onepage').on('scroll touchmove mousewheel', function(event) {	
		
		//console.log(current_idx);

		if(last_y > $("html").scrollTop() && !onpage_on){
			
			//원페이지 스크롤 진입
			console.log(":: 원페이지 시작 ::");
			onpage_on = true;
			isScroll = false;
		}
		
		if(!onpage_on) return;
		
		//스크롤 이벤트 막기
		event.preventDefault();
		event.stopPropagation();		
		if(isScroll) return; // 현재 스크롤이 동작중이면 종료
		
		
		isScroll = true;		
		var direction = event.originalEvent.wheelDelta; //마우스 휠 방향
		var y = 0;

		if(direction > 0){
			// up
			current_idx --;
			if(current_idx < 0){current_idx = -1;}
			y = current_idx * page_h;
		}
		else{
			// down
			current_idx ++;
			if(current_idx > total_section){
				current_idx = total_section;
				onpage_on = false;
				return;
			}
			
			y = current_idx * page_h;		
		}

		$('html').animate({scrollTop: y}, 500, function(){isScroll=false;});	
	});
});

$( window ).resize(function() {
	
	// 반응형
	setHeight();
});


function init(){
	
	setHeight();
	
	total_section = $('#onepage > section').length;
	last_y = page_h * total_section;
}	

function setHeight(){
	
	// 높이 설정
	screen_h = document.body.clientHeight;
	page_h = screen_h - 80;
	$("#onepage > section").height(page_h);
}

 

우선 #onpage라는 태그 아래 section이 원페이지인 친구들이다.

처음엔 ( init()함수 호출로 ) 변수들을 설정해주고 스크롤 이벤트를 설정해주었다.

 

아! 하단의 setHeight()라는 함수에 있는 해당 구문에 80이란 값을 빼준건 웹 사이트의 헤더 높이이다..

하드 코딩으로 해놔서 미리 말씀드린다 😅 확장성있게 변수로 두시면 될 것같다.

page_h = screen_h - 80;

 

https://github.com/hyeon-min-008/onepagescroll

hyeon-min-008/onepagescroll