My favorites | Sign in
Project Home Downloads Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 60: scrollToElement + Snap [after using scrollToElement, on touch and move iScroll doesn't snap]
3 people starred this issue and may be notified of changes. Back to list
Status:  New
Owner:  ----


 
Reported by neosynth...@gmail.com, Jun 2, 2011
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

Jul 10, 2012
#1 spammail...@gmail.com
Im facing the same problem. Did you find a solution? 
Aug 30, 2013
#2 pranavg....@gmail.com
I am also facing the same problem. 
I even tried calling muScroll.refresh(); but that was not resolved.
Did any one find solution?
Feb 17, 2014
#3 nun...@gmail.com
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;
	    }	
        }
    }
}
Apr 24, 2015
#4 Braksa...@gmail.com
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;
					}
				}
			}
		}
Apr 24, 2015
#5 Braksa...@gmail.com
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().

Powered by Google Project Hosting