scrolling does not work until 2nd page rendering with iscroll4

29 views
Skip to first unread message

Mark Juszczec

unread,
Oct 25, 2016, 7:40:17 AM10/25/16
to iScroll

I'm using the following:

  • cordova 6.3.1 
  • jQuery 1.11.1 
  • jQuery UI 1.11.2 
  • jQuery Mobile 1.4.5 
  • iScroll 4.2 
  • jQuery Mobile iScrollview v1.3.7
Here's my html:

<div data-role="page" id="some_page">    
<div data-role="header" data-position="fixed" data-add-back-btn="true">
          <h1>List</h1>
</div>

    <div data-role="content" id="some_div">
        <div class="example-wrapper" data-iscroll id="scrollable_list">
          <ul data-role="listview" id="unorderedlist">
          </ul>
        </div>
    </div>

    
    <div data-role="footer" data-position="fixed" style="background-color:black">
        <div id="bottombuttondiv" data-role="navbar" style="background-color:black">
            <ul>
                <li><a id="button1" href="javascript:goDoButton1();" >Button 1</a></li>
            </ul>
        </div>
    </div>    
    
</div>

Here's my javascript.

I have this in a loop to build my content:

 htmlToAppend = "<li>" +
               "<a id=" + i + " " + cssColor + ">" + caption + '<br></a>" +
               "</li>";
               "</li>";
contentForDisplay.concat(htmlToAppend);
I'm displaying it like this:
$('#unorderedlist').append(contentForDisplay);
$('#some_div').trigger('create');
$("#scrollable_list").iscrollview("refresh");
All of that works just fine.
When I change my list element to this:
 htmlToAppend = "<li>" +
               "<img id="+ i + " src=\""+imageUrl+"\" ></img><br>" +
               "<a id=" + i + " " + cssColor + ">" + caption + '<br></a>" +
               "</li>";
the first time the list displays with scrollbars and scrolling works but I am 
never able to scroll to the bottom  of the list.  If I scroll past a certain point and 
remove my finger from the screen, the display jumps back to a previous point higher 
up in the list.
If I leave the screen and navigate back to it, everything works fine.
In both cases I'm calling the function to build the list in 
$(document).on("pageshow","#some_page",
I am unsure what I'm doing wrong or how to fix it.
Has anyone faced a problem like this before?  If you did, how did you solve it?
If you did not, how would you go about trying to solve it? 

Reply all
Reply to author
Forward
0 new messages