scrollToElement + Snap [after using scrollToElement, on touch and move iScroll doesn't snap]

[GoogleCodeExporter]

Hi,

I'm using iScroll to snap on <li> elements. It's ok!
I've also added a navigation menu, using scrollToElement (here's the code).

<a href="#" class="menu" onclick="myScroll.scrollToElement('#screen4', 
'1000');return false">go to screen4</a>

And it works fine, BUT after scrolling, on the first touch&move iScroll doesn't 
snap to element (the div comes back to screen4). If I try again, it does now 
scroll to screen 3 or 5.

I think that must missing some "refresh position" on scrollToElement function.

Please help me with this.

Thanks,
Artur

Original issue reported on code.google.com by neosynth...@gmail.com on 2 Jun 2011 at 5:24

[GoogleCodeExporter]

Im facing the same problem. Did you find a solution? 

Original comment by spammail...@gmail.com on 10 Jul 2012 at 10:58

[GoogleCodeExporter]

I am also facing the same problem. 
I even tried calling muScroll.refresh(); but that was not resolved.
Did any one find solution?

Original comment by pranavg....@gmail.com on 30 Aug 2013 at 12:23

[GoogleCodeExporter]

I wrote some code for the iScroll core that fixes this issue for HORIZONTAL 
scrolling. I imagine changing left to top and x to y would fix it for vertical 
scrolling.

My specific problem was that after using scrollToElement, the currentPage value 
was not being updated. Therefore, hitting the Next or Previous buttons (eg. <a 
href="javascript:myScroll.next()">Next</a>) would throw the user back to the 
page they were on before they scrolled to the new page using my navigation 
links (eg <a 
href="javascript:myScroll.scrollToElement(document.querySelector("#pageID3"), 
500)">Scroll to Page ID 3</a>). I am using iScroll5.

This code achieves what I am looking for, but if anyone has concerns with 
performance etc please let me know.

SOLUTION:
After line 783 (this.scrollTo(pos.left, pos.top, time, easing);) I added the 
following code:

// which pane are we scrolling to?
scrollToPos = pos.left;

// all pages in this scroller
pages = this["pages"];

// loop through all pages
for (var key in pages) {
    if (pages.hasOwnProperty(key)) {

        // current page
        thisPage = key;

        // loop through page values
        for (var value in pages[key]) {

            thisPageX = pages[key][value].x;

            // if the x position matches the scroll to position, update the variables
            if(thisPageX == pos.left) {

               // update currentPage values
               this.currentPage.x = thisPageX;
           this.currentPage.pageX = thisPage;
        }   
        }
    }
}

Original comment by nun...@gmail.com on 17 Feb 2014 at 6:31

[GoogleCodeExporter]

Your code didn't work for me, I fiddled with it and eventually got this to work 
for me:

        // update currentPage coordinates
        this.currentPage.x = pos.left;
        this.currentPage.y = pos.top;

        // all pages in this scroller
        pages = this["pages"];

        // loop through all pages
        for (var key in pages) {
            if (pages.hasOwnProperty(key)) {
                // loop through page values
                for (var value in pages[key]) {
                    // if the x position matches the scroll to position, update the variables
                    if(pages[key][value].x == pos.left) {
                        // update currentPage values
                        this.currentPage.pageX = value;
                    }
                    // if the y position matches the scroll to position, update the variables
                    if(pages[key][value].y == pos.top) {
                        // update currentPage values
                        this.currentPage.pageY = value;
                    }
                }
            }
        }

Original comment by Braksa...@gmail.com on 24 Apr 2015 at 10:14

[GoogleCodeExporter]

Also for this to work, the list of 'pages' that iscroll tracks has to be 
absolutely up-to-date so a quick way to guarantee this is to call 
myScroll.refresh() right before your call to myScroll.scrollToElement().

Original comment by Braksa...@gmail.com on 24 Apr 2015 at 10:23