JeongInyoung · August 25, 2017 05:08
diff --git a/yamoo9.scrollFollow.js b/yamoo9.scrollFollow.js
 (function(global, y9){
 	'use strict';

 	// scrollFollow 객체 정의
 	var scrollFollow = {
 		/**
 		 * 초기 설정(Initialization) 메소드
 		 * yamoo9.scrollFollow.init(
 		 * 	[문자] el                : 적용대상 요소 선택자,
 		 * 	[숫자] start_pos         : 시작 위치,
 		 * 	[숫자] move_pos          : 스크롤 시 이동 위치,
 		 * 	[숫자] scroll_check_pos  : 스크롤 이벤트 감지 위치,
 		 * 	[숫자] speed             : 이동 거리 설정,
 		 * 	[숫자] timeout           : 감시 주기 밀리초
 		 * )
 		 */
 		'init': function(el, start_pos, move_pos, scroll_check_pos, speed, timeout) {
 			var self = this;
 			// 사용자 정의 설정 확인 후, 기본 값 변경하기
 			self.doc              = document.body || global;
 			self.el               = document.querySelector(el);

 			// scrollFollow를 적용할 문서 객체를 찾지 못한 경우, 처리하는 조건문
 			// <head>에 스크립트 코드를 호출한 경우 처리하는 구문
 			if( !self.el && !document.body) {
 				if( global.addEventListener ) {
 					global.addEventListener('DOMContentLoaded', function() {
 						self.init(el, start_pos, move_pos, scroll_check_pos, speed, timeout);
 					});
 				} else {
 					if ( typeof global.onload === 'function' ) {
 						self.onload = global.onload;
 					}
 					global.onload = function() {
 						self.onload && self.onload();
 						self.init(el, start_pos, move_pos, scroll_check_pos, speed, timeout);
 					}
 				}
 				return;
 			}
 			// 사용자가 전달인자를 잘못 설정한 경우 오류 메시지 출력
 			else if ( !self.el ) {
 				console.error('yamoo9.scrollFollow.init() 실행 시, 전달인자를 정확하게 설정해주세요.');
 			}

 			// 사용자 정의 설정 || 기본 설정 값
 			self.start_pos        = start_pos || 50;
 			self.move_pos         = move_pos !== 0 ? move_pos : move_pos === 0 ? 0 : self.start_pos;
 			self.scroll_check_pos = scroll_check_pos || 100;
 			self.timeout          = timeout || 10;
 			self.speed            = speed || 10;

 			// 포지션 설정 유무 확인 후, 'absolute' 값이 아닐 경우 설정
 			if( this.css('position') !== 'absolute' ) {
 				this.css('position', 'absolute');
 			}

 			// 스크롤 위치 감지 메소드 실행
 			this.checkScrollPosition();
 			// 스크롤 이벤트 감지 메소드 실행
 			this.checkScrollEvent();
 		},

 		/**
 		 * .css() 스타일 GET/SET 메소드
 		 * CSS 설정 값을 가져오거나, 설정
 		 */
 		'css': (function(){
 			if(window.getComputedStyle) {
 				return function(prop, value) {
 					if(!value) { return global.getComputedStyle(this.el)[prop]; }
 					this.el.style[prop] = value;
 				}
 			} else {
 				return function(prop, value) {
 					if(!value) { return this.el.currsetStyle[prop]; }
 					this.el.style[prop] = value;
 				}
 			}
 		})(),

 		/**
 		 * .parseInt() 메소드
 		 * value값에서 단위를 뺀 숫자를 10진수로 반환
 		 */
 		'parseInt': function(value) {
 			return parseInt( value , 10 );
 		},

 		/**
 		 * .checkScrollEvent() 메소드
 		 * 스크롤 이벤트를 감지하여 .scrolled 설정을 변경
 		 */
 		'checkScrollPosition': function() {
 			var self               = this,
 				from_pos           = this.parseInt( this.css('top') ),
 				to_pos             = this.parseInt( this.doc.scrollTop + (this.scrolled ? this.move_pos : this.start_pos) ),
 				timeout_next_check = 500,
 				distance_y;

 			if ( from_pos !== to_pos ) {

 				distance_y = Math.ceil( Math.abs( to_pos - from_pos ) / this.speed );

 				if ( from_pos > to_pos ) {
 					distance_y *= -1;
 				}

 				this.css('top', this.parseInt( this.css('top') ) + distance_y + 'px');

 				timeout_next_check = this.timeout;

 			}

 			setTimeout(function() {
 				self.checkScrollPosition();
 			}, timeout_next_check);
 		},

 		/**
 		 * .checkScrollEvent() 메소드
 		 * 스크롤 이벤트를 감지하여 .scrolled 설정을 변경
 		 */
 		'checkScrollEvent': function() {
 			var self = this;
 			self.scrolled = false;
 			global.onscroll = function() {
 				if(global.scrollY < self.scroll_check_pos) {
 					self.scrolled = false;
 				} else {
 					self.scrolled = true;
 				}
 			}
 		}
 	};

 	// Object.defineProperty 지원 유무를 파악하여
 	// yamoo9.scrollFollow 객체를 변경할 수 없도록 설정
 	if ( Object.defineProperty ) {
 		Object.defineProperty(y9, 'scrollFollow', {
 			'value': scrollFollow
 		});
 	}
 	// Object.defineProperty를 지원하지 않는 구형 브라우저의 경우,
 	// yamoo9.scrollFollow 객체 할당 (지우거나, 변경 가능)
 	else {
 		y9.scrollFollow = scrollFollow;
 	}

 })(window, (window.yamoo9 = window.yamoo9 || {}));
	(function(global, y9){
	'use strict';

	// scrollFollow 객체 정의
	var scrollFollow = {
	/**
	* 초기 설정(Initialization) 메소드
	* yamoo9.scrollFollow.init(
	* [문자] el : 적용대상 요소 선택자,
	* [숫자] start_pos : 시작 위치,
	* [숫자] move_pos : 스크롤 시 이동 위치,
	* [숫자] scroll_check_pos : 스크롤 이벤트 감지 위치,
	* [숫자] speed : 이동 거리 설정,
	* [숫자] timeout : 감시 주기 밀리초
	* )
	*/
	'init': function(el, start_pos, move_pos, scroll_check_pos, speed, timeout) {
	var self = this;
	// 사용자 정의 설정 확인 후, 기본 값 변경하기
	self.doc = document.body \|\| global;
	self.el = document.querySelector(el);

	// scrollFollow를 적용할 문서 객체를 찾지 못한 경우, 처리하는 조건문
	// <head>에 스크립트 코드를 호출한 경우 처리하는 구문
	if( !self.el && !document.body) {
	if( global.addEventListener ) {
	global.addEventListener('DOMContentLoaded', function() {
	self.init(el, start_pos, move_pos, scroll_check_pos, speed, timeout);
	});
	} else {
	if ( typeof global.onload === 'function' ) {
	self.onload = global.onload;
	}
	global.onload = function() {
	self.onload && self.onload();
	self.init(el, start_pos, move_pos, scroll_check_pos, speed, timeout);
	}
	}
	return;
	}
	// 사용자가 전달인자를 잘못 설정한 경우 오류 메시지 출력
	else if ( !self.el ) {
	console.error('yamoo9.scrollFollow.init() 실행 시, 전달인자를 정확하게 설정해주세요.');
	}

	// 사용자 정의 설정 \|\| 기본 설정 값
	self.start_pos = start_pos \|\| 50;
	self.move_pos = move_pos !== 0 ? move_pos : move_pos === 0 ? 0 : self.start_pos;
	self.scroll_check_pos = scroll_check_pos \|\| 100;
	self.timeout = timeout \|\| 10;
	self.speed = speed \|\| 10;

	// 포지션 설정 유무 확인 후, 'absolute' 값이 아닐 경우 설정
	if( this.css('position') !== 'absolute' ) {
	this.css('position', 'absolute');
	}

	// 스크롤 위치 감지 메소드 실행
	this.checkScrollPosition();
	// 스크롤 이벤트 감지 메소드 실행
	this.checkScrollEvent();
	},

	/**
	* .css() 스타일 GET/SET 메소드
	* CSS 설정 값을 가져오거나, 설정
	*/
	'css': (function(){
	if(window.getComputedStyle) {
	return function(prop, value) {
	if(!value) { return global.getComputedStyle(this.el)[prop]; }
	this.el.style[prop] = value;
	}
	} else {
	return function(prop, value) {
	if(!value) { return this.el.currsetStyle[prop]; }
	this.el.style[prop] = value;
	}
	}
	})(),

	/**
	* .parseInt() 메소드
	* value값에서 단위를 뺀 숫자를 10진수로 반환
	*/
	'parseInt': function(value) {
	return parseInt( value , 10 );
	},

	/**
	* .checkScrollEvent() 메소드
	* 스크롤 이벤트를 감지하여 .scrolled 설정을 변경
	*/
	'checkScrollPosition': function() {
	var self = this,
	from_pos = this.parseInt( this.css('top') ),
	to_pos = this.parseInt( this.doc.scrollTop + (this.scrolled ? this.move_pos : this.start_pos) ),
	timeout_next_check = 500,
	distance_y;

	if ( from_pos !== to_pos ) {

	distance_y = Math.ceil( Math.abs( to_pos - from_pos ) / this.speed );

	if ( from_pos > to_pos ) {
	distance_y *= -1;
	}

	this.css('top', this.parseInt( this.css('top') ) + distance_y + 'px');

	timeout_next_check = this.timeout;

	}

	setTimeout(function() {
	self.checkScrollPosition();
	}, timeout_next_check);
	},

	/**
	* .checkScrollEvent() 메소드
	* 스크롤 이벤트를 감지하여 .scrolled 설정을 변경
	*/
	'checkScrollEvent': function() {
	var self = this;
	self.scrolled = false;
	global.onscroll = function() {
	if(global.scrollY < self.scroll_check_pos) {
	self.scrolled = false;
	} else {
	self.scrolled = true;
	}
	}
	}
	};

	// Object.defineProperty 지원 유무를 파악하여
	// yamoo9.scrollFollow 객체를 변경할 수 없도록 설정
	if ( Object.defineProperty ) {
	Object.defineProperty(y9, 'scrollFollow', {
	'value': scrollFollow
	});
	}
	// Object.defineProperty를 지원하지 않는 구형 브라우저의 경우,
	// yamoo9.scrollFollow 객체 할당 (지우거나, 변경 가능)
	else {
	y9.scrollFollow = scrollFollow;
	}

	})(window, (window.yamoo9 = window.yamoo9 \|\| {}));