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'));
});

结帐fiddle。

Answer 1

iScrollview将内容包装在.iscroll-scroller div中，并使用transform()滚动该div。您需要检索上述div的transform CSS属性。

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

以上内容将返回matrix(1, 0, 0, 1, x, y)，而y会返回vertical transform / translate的值。然后，您需要.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);

Demo ^（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页面上的文档并没有真正解释如何使用这些，这就是引起混淆的原因。

的 DEMO FIDDLE 的

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

2 个答案: