UPDATE: I was able to make my scroller work on my own, but I feel like I hacked this problem and would like it if someone had a more solid answer, I updated and noted in the fragments below the new jQuery, which I I use.
I use iScroll-4 ( http://cubiq.org/iscroll-4 ) for the iPad / Android web application, everything works fine with scrolling and scrolling, but I have a table of contents at the beginning of the application that allows users to navigate to certain areas of the scroller -
I use the iScroll function scrollToElement scrollToElement(element, duration) to go to different areas. Also use scrollToPage(page, duration) so that the user can manually move forward and backward one page at a time.
While viewing console logs, the currPageX variable currPageX updated when I move with the scrollToPage function and while scrolling, but when using scrollToElement variable currPageX not updated.
Therefore, if I go to an element and then go forward with scrollToPage('next', 0) , it will go back and move me to the next page after the table of contents.
I tried using the scroll.refresh() function after scrollToElement before putting the function in timeout, etc., and I cannot understand why currPageX not updating.
Here is a jQuery code snippet in which I use two different functions:
// TO NAVIGATE FORWARD AND BACKWARDS $('span.control').on('click', function() { var slideDir = $(this).attr('data-dir'); if (slideDir == 'prev') { var tehPg = tehScroll.currPageX-1; } else if (slideDir == 'next') { var tehPg = tehScroll.currPageX+1; } tehScroll.scrollToPage(tehPg, 0); return false; }); // TO JUMP FROM CONTENTS $('li[data-page="toc"] span').on('click', function() { var toPage = $(this).attr('data-page'); tehScroll.scrollToElement('li[data-page="'+toPage+'"]', 800); // ADDED THE FOLLOWING LINE TO MANUALLY SET currPageX after scrolling! tehScroll.currPageX = $('#slides li[data-page="'+toPage+'"]').index(); return false; });