Search code examples
javascriptandroidhtmlscrolliscroll4

Mobile's Scrolling problems (On autocomplete list)


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:

  1. The first time I press the keyboard letter the list appears without scrolling, only on clicking the second letter scroll appears.

  2. 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?


Solution

  • 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