iScroll with Dynamic Div Content (Ajax or jQuery)

[Jameel Moses]

I've tried several methods to get this working, and I could use a little help.

Basically, I have a three column layout. The left column is the navigation, the center column is content delivered dynamically after clicking on the left column, and the right column is more detailed information after clicking an item in the center column.

Whenever I try and include an external file, it breaks the scroll. It will still scroll, but as soon as I lift my finger it automatically scrolls back to the top.

Is there anyway to prevent this? I don't want to just hide and show divs because the pages would be so long. I need to be able to pull these external pages which makeup the content of the divs.

Any thoughts or ideas?

[Amauri Melo]

Jameel, try refreshing the scroll about 100ms after your dinamic content was placed on the scrollable area.

[Jameel Moses]

How can I do this?

[AlanH]

I assume you add the dynamic content to the scroller in a callback from an Ajax call. Inside that callback function, after you have put the new content in place, add something like:

setTimeout(function() {

       iScrollRef.refresh();

},100);

where iScrollRef is the iscroll object that controls the scroller. The '100' parameter is the delay.

[Amauri Melo]

After your content was loaded by your ajax, do the following:

setTimeout( function(){
  myScroll.refresh() ;
} , 100 ) ;

this may work. myScroll is the object where you stored the scroller object.

[Jameel Moses]

Thanks, guys! I'll give this a try...

[Chris C]

If that does not work you will have to destroy the scroller and then
rebuild it. In many of my AJAX panels I have to do this because the
content is so dramatically changed.

[Chris Stahl]

I want to thank you for posting this question and to also thank Chris C for his solution. I ended combining the information here with what's written in the "Mastering the Refresh Method" of the iScroll 4 page to solve a couple of problems I was having.

For one: I was bringing in data via ajax to populate my scroller. It was populating into a scroller div as shown on the iScroll 4 examples page:

<div id="wrapper">
	<div id="scroller">
		<ul>
			<li></li>
			...
			...
		</ul>

		<ul>
			<li></li>
			...
			...
		</ul>
	</div>
</div>

Unfortunately, a scrollbar wasn't showing up and when you tried to scroll at first it would snap back to the top. So, I added this after the initialization:

setTimeout(function () {
		myScroll.refresh();
	}, 0);

That solved my scrollbar not appearing issue.

Secondly, I have several filters that remove/update the items being shown in the scroller. I thought adding just myScroll.refresh(); would solve the problem. Unfortunately, 

It was causing iScroll to create multiple versions of the scrollbar. Based on Chris C's comment I figured out that I needed to destroy the iScroll first then reconstruct it. And let's not forget you still need to refresh. Here's what I added at the end of my update function:

myScroll.destroy();

myScroll = null;

myScroll = new iScroll('resultsDisplay');

setTimeout(function() {

myScroll.refresh();

},0);

And now everything works as expected!

[Priyanka]

Thanx a lot Chris , ur solution really works !!!  

[Brian]

This was a really good post... solved some real headaches for me.

Maybe somebody can help w/ a related issue...

I'm using using destroy() + refresh() as outlined above. After refreshing, my JQuery Mobile form input widget looks great... the user enters some text, that active "blue" shadow appears as expected. However, the active state never goes away after the user leaves the input box and clicks/touches anywhere within the scroll div.

Any ideas or workarounds for this?

Thanks very much.

[aaron yang]

hi,i have encoutnered the same problem,have you sloved it?

在 2012年5月18日星期五UTC+8上午7时01分42秒，Brian写道：

[Leon Zinger]

I have done it very simple without any timeouts with the 

.on('scrollStart',function(){myScroller.refresh()})

[Abhimanyu Singh]

i m using infinite.js of iscroller. Initially my <li> are blank and updating content with

 

dataset: requestData,

dataFiller: updateContent

now contents are just images with different heights. (1 img in each <li>) . but its not working. images are getting stacked up one above another.

Any thoughts or ideas?