iscroll scrollToElement not updating currPage variable

Question

UPDATE: I was able to get my scroller working as desired but I feel like I have hacked around the actual issue and would love it if anyone has a more solid answer, I've updated and noted in the snippets below the new jQuery I'm using.

I'm using iScroll-4 (http://cubiq.org/iscroll-4) for an iPad/Android web app, everything's working perfectly with the swipes and scrolling but I have a table of contents at the beginning of the app that allows users to jump to specific areas of the scroller --

I'm using the iScroll function scrollToElement(element, duration) in order to jump to the different areas. Also using scrollToPage(page, duration) to allow the user to manually navigate forward and backward one page at a time.

While watching the console logs the currPageX variable updates when I navigate with the scrollToPage function and when I swipe, but when using the scrollToElement the currPageX variable does not update.

Therefore if I jump to an element and then navigate forward with scrollToPage('next', 0) it will go backwards and navigate me to the next page after the table of contents.

I have tried using the scroll.refresh() function after scrollToElement, before, putting the function inside a timeout, etc. and I can't figure out why the currPageX is not updating.

Here's a snippet of the jQuery code that I'm using the 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;
  });

Macula

I am using version 5 of iScroll and had the same problem. The way I solved it was by writing tehScroll.currentPage.pageY instead of tehScroll.currPageX Also, what's the purpose of that return false at the bottom? – Farseeing

return false will stop the default action of the clicked element, so for an a tag that would be navigating to the href, however, in this case, because the click handler is on a span, it does precisely nothing ;) – Livvi

Answer 1

Did you consider using jquery-mobile-iscrollview widget plug-in? - there is a function scrollToPage(pageX, pageY, time), works well for me...

best

M

Polyester