[jQuery] mobile touch scroll noti event

모바일 시 사용자가 좌우 스크롤 하도록 유도하는 이미지 띄우는 이벤트

 

모바일에서 터치 또는 영역 스크롤 시 이미지 사라지는 이벤트

<div class="scroll_wrap">
	<div class="scroll_guide">
    	<img src="scroll_guide.png" alt="scroll guide"> 
    </div>
    <div class="scroll_contents">
    	<!-- scroll contents -->
    </div>
</div>

// scroll wrap
.scroll_wrap{
    overflow-x: auto;
    width: 100%;
}

// guide image
.scroll_guide{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.scroll_guide img{
    max-width: 100%;
}

// scroll contents
.scroll_contents{
    width: 100%;
    min-width: 768px;
}

// scroll guide
function scrollGuide(){
	$('.scroll_wrap').on('scroll', function(){
		$('.scroll_guide').stop().fadeOut();
	});

	$('.scroll_contents').on('touchstart', function(){
		$('.scroll_guide').stop().fadeOut();
	});
}