jQM - iScrollView example 1

by Omar X

HTML

<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css">
<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css">
<script src="http://example.gajotres.net/iscrollview/iscroll.js"></script>
<script src="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js"></script>
<div data-role="page" id="index">
    <div data-theme="b" data-role="header">
         <h1>Index page</h1>

    </div>
    <div data-role="content">
        <div class="example-wrapper" data-iscroll>
            <div class="iscroll-pulldown"> <span class="iscroll-pull-icon"></span>
 <span class="iscroll-pull-label"></span>

            </div>
            <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>
                <li><a href="#">Some link</a>

               ...

CSS

.ui-content {
    padding: 0 !important;
}
.ui-listview {
    margin: 0 !important;
}
.example-wrapper, .example-wrapper div.iscroll-scroller {
    width: 100% !important;
}

JavaScript

$(document).on('pageshow', function () {
    $(".example-wrapper").iscrollview("scrollTo", 0, 200, 200, true);
    setTimeout(function () {
        var obj = $(".iscroll-scroller").css("transform").split(" ");
        console.log(parseInt(obj[5], 10));
        alert("Y Position: " + parseInt(obj[5], 10));
    }, 220);
});