Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Touch for mobile
/**
* 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();
/**
* 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');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.