KendoUI Accordion not getting expanded in iPad

Question

I have a web application running on iPad. This application contains a Kendo UI Accordion inside it.

When the content of the page is more than the size of the screen and when I want to scroll, normal page scrolling happens (as expected). But when try to scroll the Kendo Accordion, the page scrolling happens instead of accordion scrolling (unexpected).

I was able partly handle this issue by applying solution given by Chris Barr.

After applying this solution the accordion is getting scrolled instead of the whole page which I wanted.

But the problem is when I click the items on the Accordion, the accordion item doesn't get expanded. How can I get to work this.

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);
}}

Answer 1

Remove event.preventDefault() in touchstart event listener. It will allow you to click on links inside the scrollable area.