1

I'm using PhoneGap to create an iPhone application. I'm trying to use iScroll for the zoom functionality. But I'm having a problem where I cannot scroll until I zoom in on the div. Once I un-zoom the div then it's automatically scrolled back to the top.

I've looked at the following two threads that I thought would help but neither solution worked for my situation.

Thread 1

Thread

I have a div that has images added to it after an AJAX call. I created a div wrapper around it that should be zoomable. The code for this is as followed

<div id = 'zoom-wrapper'>
    <div id="historyResponse"></div>
</div>

I have a JS function called showHistory() that has an AJAX call. On success images are added to the historyResponse div using .append().

After reading the two threads mentioned above I tried added things like myScroll.refresh() or destroying then recreating myScroll at the end of the JS function showHistory() but nothing fixed my problem.

Are there any other things I can try to fix this problem?

Thanks in advance!

Community
  • 1
  • 1
user1543269
  • 57
  • 2
  • 8

1 Answers1

0

Try to pass this option checkDOMChanges:true. It helped me once to sort out similar problem when myScroll.refresh() failed.

Something like this

if('undefined' !== typeof myScroll){
   myScroll.destroy();
}

myScroll = new iScroll('<YOUR_ELEMENT_ID>', { checkDOMChanges:true });

If you still face problem then try this

if('undefined' !== typeof myScroll){
   myScroll.destroy();
}

myScroll = new iScroll('<YOUR_ELEMENT_ID>', { 
   checkDOMChanges:true, 
   onBeforeScrollStart : function(e){ 
      myScroll.refresh(); 
   } 
});

I hope at least one solution will help you. :)

Faizul Hasan
  • 625
  • 1
  • 7
  • 17