Touch for mobile

DisabledTouchscroll.js

/**
 * Disabled touch scroll for ios
 * ios 디바이스에서의 스크롤은 튕기는 방식 때문에 html,body엘리먼트에서 overflow:hidden을 적용해봤자 튕기는 스크롤을 막을 필요가 있었는데 스크립트로 터치를 막아버리는 방법으로 인터페이스를 만들게 되었다.
 * 특히 사이드바 네비게이션을 사용할때 사용하면 도움이 될것이다.
 * body 엘리먼트 스크롤을 막는 역할을 한다. 다른 특정 엘리먼트는 -webkit-overflow-scrolling: auto;로 처리가 가능하다고 봄
 */
function DisabledTouchscroll()
{
	var self = this;
	var $body = $(document.body);
	var $document = $(document);

	this.enableSelector = '';

	var checkScroll = function($el, fixHeight)
	{
		return ($el.get(0).scrollHeight-fixHeight) > $el.height();
	};

	/**
	 * disabled scroll ON
	 *
	 * @Param String getEnableSelector : enable scroll in element
	 * @Param Number adjustHeight : fix height
	 */
	this.on = function(getEnableSelector, adjustHeight)
	{
		this.enableSelector = getEnableSelector || '';

		$document.on('touchmove.disabledScroll',function(e){
			e.preventDefault();
		});

		$body.on('touchstart.disabledScroll', this.enableSelector, function(e) {

			if (checkScroll($(self.enableSelector), adjustHeight))
			{
				if (e.currentTarget.scrollTop === 0)
				{
					e.currentTarget.scrollTop = 1;
				}
				else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight)
				{
					e.currentTarget.scrollTop -= 1;
				}
			}
			else
			{
				e.preventDefault();
			}
		});

		$body.on('touchmove.disabledScroll', this.enableSelector, function(e) {
			e.stopPropagation();
		});
	};

	/**
	 * disabled scroll OFF
	 */
	this.off = function()
	{
		$document.off('touchmove.disabledScroll');
		$body.off('touchstart.disabledScroll');
		$body.off('touchmove.disabledScroll');
	}
}


/**
 * E X A M P L E
 */
// make instance object
var disabledTouchScroll = new DisabledTouchscroll();

// disabled scroll ON
// disabled 예외 엘리먼트 셀렉터, 예외 엘리먼트 세로사이즈 보정(전체사이즈에서 뺄 값을 넣는다.)
disabledTouchScroll.on('#sidebar .scroll-body', 30);

// disabled scroll OFF
disabledTouchScroll.off();

touchClick.js

/**
 * Touch click
 * 버튼에 touchend 이벤트를 사용한 버튼을 touchend 이벤트가 일어났을때 터치위치가 버튼영역 속에 들어가 있는지 체크하여 클릭 콜백함수를 날리는 플러그인.
 * 터치가 지원하지 않는 환경에서는 오류를 유발시켜 catch에서 콜백함수를 실행시킨다.
 *
 * @Param Function callback
 */
jQuery.fn.touchClick = function(callback)
{
	var $this = $(this);
	$this.on('touchend click', function(e){
		try {
			var $button = $(e.currentTarget);
			var buttonOffset = $button.offset();
			var touchOffset = { x: e.originalEvent.changedTouches[0].pageX, y: e.originalEvent.changedTouches[0].pageY };

			if (
				(buttonOffset.left < touchOffset.x) && ((buttonOffset.left+$button.outerWidth()) > touchOffset.x) &&
				(buttonOffset.top < touchOffset.y) && ((buttonOffset.top+$button.outerHeight()) > touchOffset.y)
			)
			{
				callback($this);
			}
		}
		catch(error)
		{
			callback($this);
		}
		return false;
	});
};


/**
 * E X A M P L E
 */

$('.button').touchClick(function($el){
	$el.toggleClass('on');
});