简体   繁体   中英

iscroll scrollToElement not updating currPage variable

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;
  });

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

best

M

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM