I have an auto-complete list, in the list I use the scrolling of iscroll 4: http://cubiq.org/iscroll-4 for Mobile.(Html5 + PhoneGap for Android)
When writing a letter in the input (AutoComplete is turned on) I called to a function that refresh the scroll, Because each time write a letter the size of the list changes.
My refresh function:
function RefreshScroll() {
MyScroll.scrollToElement('li:nth-child(1)', 100)// Jump to the first element
setTimeout(function () {
MyScroll.refresh();// Refresh scroll bar -function of iscroll 4
}, 0);
}
My scroll:
document.addEventListener('DOMContentLoaded', LoadScroll, false);
var myScroll;
function LoadScroll() {
document.addEventListener('touchmove', function (e) { e.preventDefault(); });
myScroll= new iScroll('wrapper');
}
I have several problems:
The first time I press the keyboard letter the list appears without scrolling, only on clicking the second letter scroll appears.
The second time when the scroll appears and I scroll down, when reach the end of the list instead of jumping back he goes down as the list goes on.
Can anyone help me?
Finally I solved the problem this way:
Because it takes time for AutoComplete to fill, I refresh the scroll only after some time.
I changed the function:
function RefreshScroll() {
setTimeout(function () {
MyScroll.scrollToElement('li:nth-child(1)', 100)
setTimeout(function () {
MyScroll.refresh();
}, 0);
}, 200);
}
This solved both problems, probably every time it loads the previous list scrolling