Estoy practicando pra realizar una web que funcione scroll lateral tanto desde el wheel del mouse como desde el swipe de un dispositivo movil. Hasta ahora todo funciona exceptuando los dispositivios moviles que no sean IOS .
Haciendo algunas pruebas para captar los eventos que se disparan cuando realizo un swipe desde android he visto que primero lanza un evento de Mouse y despues el evento touchstart.
Yo he separado los eventos por mouse y touch , las funciones que gestionan esto seran las siguientes :
Código Javascript :
function compSwipe(){
var xIni;
var yIni;
isTouchable=true;
//var canvas = document.getElementById('objeto');
window.addEventListener('touchstart', function(e){
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
xIni = touch.pageX;
yIni = touch.pageY;
}
}, false);
window.addEventListener('touchmove', function(e){
e.preventDefault();
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
if((touch.pageX>xIni+20) && (touch.pageY> yIni-5) && (touch.pageY<yIni+5)){
delta=-1;
handleSwipe(delta);
}
if((touch.pageX<xIni-20) && (touch.pageY> yIni-5) && (touch.pageY<yIni+5)){
delta=+1;
handleSwipe(delta);
}
}
}, false);
}
function wheel(event){
var minScrollTime = 100;
var now = new Date().getTime();
var delta = 0;
if (!scrollTimer) {
if (now - lastScrollFireTime > (3 * minScrollTime)) {
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
} else if (event.detail) {
delta = -event.detail/3;
}
if (delta)
handle(delta);
lastScrollFireTime = now;
}
scrollTimer = setTimeout(function() {
scrollTimer = null;
lastScrollFireTime = new Date().getTime();
}, minScrollTime);
}
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
Alguien puede encaminarme a como usar el swipe sin necesidad de una libreria externa ?
Muchas gracias por vuestro tiempo ,
