使用iscrollview jquerymobile插件获取滚动条的位置

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>    

以下是移动滚动条的 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-scrollerdiv中，并使用transform()滚动该div。您需要检索上述div transform 的 CSS 属性。

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

演示^（1）

^（1） setTimeout() 在演示中用于延迟动画（变换）完成后检索posY。

Answer 2

虽然@omar的答案确实得到了我们想要的东西，但在对代码进行了大量干预之后，我终于找到了更简单的方法。iscrollview插件有一组getter，可用于直接访问所需的信息。

$(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 页面上的文档并没有真正解释如何使用它们，这就是导致混淆的原因。

演示小提琴