iScroll Stopping Before End of Content

[David Millar]

I'm working on a mobile version of my company's social platform and I'm loving iScroll for the ability to use a fixed header and footer.

For some reason, iScroll doesn't want to let me scroll to the bottom of pages. For example, on http://www.hellolife.net/mobile/profile.php?userid=45127 the content finishes scrolling after the first "5 Awesome Things" item, but there are 4 more items below it. I can partially see them but pulling up on the page with my finger, but it snaps back to that point right below item #1 every time. This is happening on many other pages on the mobile site but at various different locations/amounts of cut-off stuff.

Anyone have any ideas what I'm doing wrong and how I can remedy it?

Thanks in advance!

[Eric Y. Theriault]

It seems to be working now as far as I can tell. When this happens to me, its usually because I've initialized the wrong div, initialized the div before content was there, or dynamically added new content to the div -- the latter two require you to call refresh() on the iScroll object. HTH.

Eric

[Dit Ben Ik]

Hi,

I have exactly the same problem with an app of mine. It works perfectly in Safari on my Mac but it doesn't work on my iPhone, regardless of whether I use Safari or an app compiled with XCode/PhoneGap.

Mark

[David Millar]

I've got it working better, but still not 100%. I set up a timeout to
refresh the iScroll object a little while after the page loads, but
I'm still experiencing some pages where there are issues. I guess I'll
keep working on timing out more/later refreshes and just hope for the
best.

Dave

[Chris C]

To get this to work reliably for me using dynamic content I destroy
the old myScroll object and then rebuild it every time the pages
contents get changed. If its only hiding/showing something the a
refresh works OK but if content changes the height to the panel I have
to destroy and rebuild.

Doing it this way gives me 100% accurate results. Note also you will
need a small timeout in your creation call.

[David Millar]

I'm not changing page content though, and even if I wait until my page is fully loaded before calling the iScroll creation I'm still experiencing this problem. In fact, I started using iScroll in a new personal project separate from the one I'm doing at work, and even with this one I'm experiencing the same bug, even after waiting for the page to fully load.

http://www.thegriddle.net/lab/play.php

[Hunlon Sue]

On Aug 5, 11:32 pm, David Millar <davmil...@gmail.com> wrote:
> I'm working on a mobile version of my company's social platform and I'm
> loving iScroll for the ability to use a fixed header and footer.
>
> For some reason, iScroll doesn't want to let me scroll to the bottom of

> pages. For example, onhttp://www.hellolife.net/mobile/profile.php?userid=45127the content

> finishes scrolling after the first "5 Awesome Things" item, but there are 4
> more items below it. I can partially see them but pulling up on the page
> with my finger, but it snaps back to that point right below item #1 every
> time. This is happening on many other pages on the mobile site but at
> various different locations/amounts of cut-off stuff.
>
> Anyone have any ideas what I'm doing wrong and how I can remedy it?
>
> Thanks in advance!

Hi David,

You should check to see if your scroller dimensions exceed your
wrapper dimensions. iScroll works out how much it can scroll based on
that calculation. The code is found in the refresh() method and uses
wrapper.clientHeight, scroller.offsetHeight, scroller.offsetBottom and
scroller.offsetTop. I find that sometimes these values are not set or
set to zero.

If that is the case then you could find the actual height of the
scroller by using getComputedStyle() and set the height of the
scroller directly before refreshing iScroll. As an example, assume
that your scroller has an id of "myScroller" the code would look like:
var element = document.getElementById("myScroller");
element.style.height =
document.defaultView.getComputedStyle(element,"").getPropertyValue("height");

Hope this helps,
Hunlon.

[David Millar]

Thanks for the suggestion Hunlon. I tried the code sample you gave using Firebug's console and my proper IDs and all, but it didn't appear to help. I'm trying to look at the discrepancies between the scroller and wrapper sizes, but I'm not entirely sure what to be looking for. All I can say for sure is that the "-moz-transform: translate(.....)" bit isn't matching up with the height of the scroller even when scrolled as far as it will allow.

[Jorgos Coenen]

Hi!

I seem to be having about the same problem. The height of the scrolling div seems to be the problem.

I have content coming from a database, so the height of the scroller always varies. 

When I force it to, say 1000px, I'm able to scroll a little further. But obviously I can't make my scroller have the same height all the time.

Could you give a more detailed explanation of the code sample you gave above?

I've tried it but I'm unsure where and how I'm supposed to implement it.

Many thanks

Jorgos

[David Millar]

Oddly enough Jorgos, I'm starting to experience that problem now as well; sometimes I can scroll beyond the end of my page and rather than stopping early, the scrolling ends late. The blank area I scroll to isn't part of my container either; I can't click-drag or touchmove to scroll it so only refreshing the page or some other manual method can get me back to the content.

http://davegoesthedistance.com/creepypasta (warning: page content contains harsh language and scary/horror stories) is the new page I'm having trouble with now.

iScroll works better than anything else I've tried, but I'm starting to get frustrated with these weird issues that keep arising. :( I almost wish I could afford to pay for help on this.

[Jorgos Coenen]

Mine is at http://cmdstud.khlim.be/~jcoenen/portfolio/iphone.php . If you take a look at it on an iDevice you'll get the mobile version of the site. I've set the height of the div where the content is loaded into to 1000px and get some scrolling that way. So this tells me that the height is indeed the problem.

I've tried adding a delay to the iScroll function and placing it before or after where the content is loaded; both proofed useless so far.

If I force the height of the div even further, to fit the content currently loaded into it, the iScroll for some reason stops working.

I'm confused....

[Matteo Spinelli]

You are using a font-face loaded from google fonts. The font has a very different spacing from arial. That is causing your issue. You have to wait for the font to completely load before initiating the iScroll. Put the init phase onload and not on onready.

Consider that sometimes the renderer takes longer to show the font-face, so you might also considere triggering the refresh() function after a couple of seconds from page load.

Matteo

[Jorgos Coenen]

Hope that works for you!

Any suggestions for me as well?

I'm just using Helvetica so I don't think my font should be of any problem.

thanks you so much,

Jorgos 

[fahmi]

That solution works! using "onload" instead "ondomcontentloaded"

[DjebbZ]

Same for me ! I was using Zepto $.ready function (the same than jQuery ready()), and it was firing too soon. So I changed it to this code, as stated in the docs :

var myScroll;

// Not using $.ready because it was firing too soon.

function loaded() {

  setTimeout(function () {

    myScroll = new iScroll('wrapper');

  }, 100);

}

window.addEventListener('load', loaded, false);

And it works just good. Thank you !

[João Josézinho]

Found this thread on Google and the problem I had wasn't mentioned here so I thought I'd reply just in case someone else stumbles upon this problem. My issue was that I had a web font loading after iScroll was attached to the wrapper and that ended up changing the size of the content.

To prevent this make sure that all the fonts that might show up in the content inside your scrollable area are already cached by the browser.

[Vishnuvardan R S]

I also faced this issue. Now, it is fixed after moved the iScroll initialization part in the end.

If you are making any dynamic content, make sure you load iScroll after that. Else you can try iScroll refresh() function.