Get position of scrollbar with iscrollview jquerymobile plugin?

Question

The Html :

<div data-role="page" id="index">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h1 class="header">Index page</h1>
    </div>

    <div data-role="content">
        <div class="example-wrapper" data-iscroll>
            <ul data-role="listview">
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>                
              </ul>
        </div>          
    </div>

    <div data-theme="b" data-role="footer">
        <h1><a href="#" class="top">Footer</a></h1>
    </div>    
</div>    

The following is the javascript to move the scrollbar. But i want to retrieve the position of the scrollbar after it has moved:

$(document).on('click','a.top',function(){   
    $(".example-wrapper").iscrollview("scrollTo", 0, 100, 200, true);
    console.log($('.iscroll-wrapper').iscrollview('option','y'));
});

Checkout this fiddle.

Answer 1

iScrollview wraps content in a .iscroll-scroller div, and uses transform() to scroll that div. You need to retrieve transform CSS property of the aforementioned div.

$(".iscroll-scroller").css("transform");

The above will return a matrix(1, 0, 0, 1, x, y), and y carries the value of vertical transform/translate. Then you need to .split(" ") matrix and convert it into an array to be able to read it.

var matrix = $(".iscroll-scroller").css("transform").split(" ");

The array will look like this

["matrix(1,", "0,", "0,", "1,", "0,", "-100)"]

Then just parseInt(string, radix) last value in array, (matrix.length - 1 = index of last value).

var posY = parseInt(matrix[matrix.length - 1], 10);

Demo ⁽¹⁾

⁽¹⁾ setTimeout() is used in demo to delay retrieving posY after animation (transform) is done.

Answer 2

Though @omar's answer does get us what we want, after alot of meddling with the code i finally figured it out the easier way. The iscrollview plugin has a set of getters that can be used to directly access the information needed.

$(document).on('click','.top',function(){
    console.log('Scroller Position Y ='+$('.example-wrapper').iscrollview('y'));
    console.log('Scroller Height = '+$('.example-wrapper').iscrollview('scrollerH'));
    console.log('Wrapper Height = '+$('.example-wrapper').iscrollview('wrapperH'));


    });

The documentation on the github page of the plugin does not really explain how to use these and thats what was causing the confusion.

DEMO FIDDLE