Получить положение полосы прокрутки с помощью плагина iscrollview jquerymobile?

Question

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>    

Ниже приведен JavaScript для перемещения полосы прокрутки. Но я хочу получить положение полосы прокрутки после того, как она переместилась:

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

Оформить эту скрипку.

Answer 1

iScrollview оборачивает содержимое в .iscroll-scroller div и использует transform() прокрутить этот div. Вам нужно получить transform CSS свойство вышеупомянутого div.

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

Выше вернется matrix(1, 0, 0, 1, x, y), а также y несет в себе значение вертикального преобразования / перевода. Тогда вам нужно .split(" ") матрица и преобразовать его в массив, чтобы иметь возможность читать его.

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

Массив будет выглядеть так

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

Тогда просто parseInt(string, radix) последнее значение в массиве, (matrix.length - 1 = индекс последнего значения).

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

Демо ⁽¹⁾

⁽¹⁾ setTimeout() используется в демоверсии, чтобы задержать получение posY после анимации (трансформации).

Answer 2

Хотя ответ @omar действительно дает нам то, что мы хотим, после многократного вмешательства в код, я, наконец, понял это более простым способом. Плагин iscrollview имеет набор методов получения, которые можно использовать для прямого доступа к необходимой информации.

$(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'));


    });

Документация на странице github плагина на самом деле не объясняет, как их использовать, и именно это и привело к путанице.

ДЕМО СКИДКА