JAVASCRIPT: Touch Device

[Mobin 1669]

با استفاده از این کد میتوانید حرکت تاچ را تشخیص داده و اسکرول را در صفحه یا المانهایی مانند div تنظیم کنید

تشخیص tuch device

function isTouchDevice() {
	try { document.createEvent("TouchEvent"); return true; }
	catch(e) { return false; }
}

بردن اسکرول به مکان مورد نظر

function touchScroll(id) {

	if (isTouchDevice()) {

		var e	= document.getElementById(id);
		var sPos = 0;

		e.addEventListener("touchstart", function(event) {
			sPos = this.scrollTop+event.touches[0].pageY;
		}, false);

		e.addEventListener("touchmove", function(event) {
			this.scrollTop = sPos-event.touches[0].pageY;
			event.preventDefault();
		}, false);
	}
}

[np.1400 542]

سلام

اگه ممکنه یه کم سطحو بیارید پایین تر که استفاده کنیم.

ممنون

[Parsa 23463]

ممنون مبین

با این کد میشه زمان لمس صفحه به اون بخش اسکرول بشه؟

هر دو تابع هست در چه رویدادی فراخوانی شوند؟

[Mobin 1669]

سلام کافیه تابع رو در onload صفحه به صورت زیر استفاده کنید

اگه اسم divشما divscroll باشد به صورت زیر میشود

touchScroll('divscroll')

مثال کاملتر

میتونین به صورت زیر در یک فایل jsقرار داده و به صفحه مورد نظرتون اضافه کنید

(function(){
	function isTouchDevice(){
		try{
			document.createEvent("TouchEvent");
			return true;
		}catch(e){
			return false;
		}
	}

	function touchScroll(id){
		if(isTouchDevice()){ //if touch events exist...
			var el=document.getElementById(id);
			var scrollStartPos=0;

			document.getElementById(id).addEventListener("touchstart", function(event) {
				scrollStartPos=this.scrollTop+event.touches[0].pageY;
				event.preventDefault();
			},false);

			document.getElementById(id).addEventListener("touchmove", function(event) {
				this.scrollTop=scrollStartPos-event.touches[0].pageY;
				event.preventDefault();
			},false);
		}
	}

	//On page load
	touchScroll('divscroll')

})();