1

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

签出这个小提琴。

4

2 回答 2

1

尽管@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 页面上的文档并没有真正解释如何使用这些，这就是造成混乱的原因。

演示小提琴

于 2014-02-22T05:51:09.123 回答
1

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

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

以上将返回 a 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动画（变换）完成后的检索。

于 2014-02-21T17:53:37.523 回答