CODEWITHSUNDEEP
javascripthtmltouchscreenpreventdefaultvertical-scrolling
geochanto
geochanto

Reputation: 1002

Stopping Touchscroll also prevents clicking links

I got this code that is supposed to disable entire page from scrolling when someone tries to touch-scroll inside a mobile menu. Unfortunately it also prevents touch-clicking the links (on touchscreens only). I need to make sure links are still clickable.

(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('mainmenu-mobile')
})();

Got the code from here: http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

http://jsfiddle.net/nv3vj29f/

Upvotes: 0

Views: 72

Answers (1)

BassMHL
BassMHL

Reputation: 9047

On the touchstart event, you should remove the event.preventDefault() line. This is preventing links to be clicked.

Needless to say, you should keep the event.preventDefault() on the touchmove as this is preventing the scroll.

Upvotes: 2

Related Questions