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.

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 21 '14 at 17:53

Omar

32,302
9
69
112

Thanks mate though i was hoping the answer wouldn't requrie a hackish approach.Seems like the plugin applies a padding of its own causing the scrollbar position to never indicate 0. Anyway to detect bottom/top of page ? – Varun Nath Feb 21 '14 at 18:16
@nathvarun you're welcome. What do you mean by detect top/bottom of page? Offset? – Omar Feb 21 '14 at 18:31
I want to detect when the scrollbar has reached the bottom of the page i.e user has scrolled to the last element. – Varun Nath Feb 21 '14 at 18:45
@nathvarun in this case you need to calculate scrollable div height, wrapper height and scroll position. I'll update my answer with the code later this evening. – Omar Feb 21 '14 at 18:57

score 1 · Answer 2 · answered Feb 22 '14 at 05:51

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

Get position of scrollbar with iscrollview jquerymobile plugin?

2 Answers2