I modified it into a React vertically scrolling carousel component that was scrolling the whole page instead of just the carousel on mobile ios devices.

I found that removing both of the preventDefaults meant that on ios the scrolling still chained up making the whole page scroll. But by removing just the first preventDefault() in the touchStart addEventListener function it allowed items to be clicked AND stopped the scroll-chaining.

Also I removed the line: var el=document.getElementById(id); — because the variable is never used and React nags you about that sort of thing :-)

Thank you!!!!

So, I will see if a freeze (or active setting page scroll y to 0 ) solves this issue alone. This would work in any browser then, not needing to support touch events.

Anyone utilizing this code please note: The code above will stop all clicks occurring in these sliders. Be sure to delete the prevent.default. Other then that this code works perfectly!

“` 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;

},false);

document.getElementById(id).addEventListener(“touchmove”, function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;

},false);
}
}

touchScroll(“YOUR_ID_GOES_HERE”);“`

Perhaps that behavior can be archived only on your own website, so maybe it needs to e a browser extension..