| 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 |
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
Aug 30, 2013
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
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
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
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(). |