Question

请告诉我，这可以使用jquery mobile在div竞争中添加iscroll。我找到了这个解决方案 http://mobile.tutsplus.com/tutorials/mobile-web-apps/introduction-to-iscroll/ 但它对我不起作用。实际上我知道jQuery有默认的iscroll。但它在IOS中工作正常但不在android中所以我需要在android中添加iscroll。

我需要在给定的div中添加iscroll。 http://jsfiddle.net/naveennsit/45DB9/

<div id="realTimeContents" class ="left realtimeContend_h" style="width:100%"> 
                         Sachin Ramesh Tendulkar AM (Listeni/səˈtʃɪn tɛnˈduːlkər/; born 24 April 1973)[1] is an Indian cricketer widely
</div>

Answer 1

编辑＃1滚动div内容而不是列表项

编辑＃2：当内容滚动到最后时发出警报

这就是我在JQM中设置iScroll的方法。它也适用于我的Android设备

<html>
<head>

<style type="text/css">

</style>


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script src="iscroll.js"></script>

<script>
    var myScroll;

    // -- pageinit event that fires for SPECIFIC PAGE ONLY --
    // -- this code is executed only once upon initital page load (or if it is no longer in the cache)
    $(document).on("pageinit", "#example_page_one", function() {

        // iScroll uses the following in their examples but if we did that in a JQM
        // site then normal mobile scrolling would be disabled on EVERY PAGE :-(
        //      document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        // Instead, we disable normal mobile scrolling for the JQM 'page' that we are using iScroll in
        $('#example_page_one').on('touchmove', function(e){ e.preventDefault; });

        // edit #2: will look for and alert when end of contents are reached
        myScroll = new iScroll('wrapper', {
              onScrollEnd: function() {
                    if(($('#wrapper').offset().top - $('#scroller').offset().top) + $('#wrapper').height() >= $('#scroller').height()){
                        alert('the end');
                    }                        

              }
        });

    });
</script>


<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>


</head>
<body>


<div data-role="page" id="example_page_one" data-theme="b" data-content-theme="b">


<style type="text/css">

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;
    background:#aaa;
    overflow:auto;
}

#scroller {
    position:absolute; z-index:1;
/*  -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
}

#scroller ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}
</style>


<div id="wrapper">
    <div id="scroller">

        <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla orci eu vehicula viverra. Aliquam scelerisque purus eleifend ipsum facilisis, vitae auctor erat laoreet. Phasellus imperdiet dolor vel accumsan rutrum. Donec nec neque in orci malesuada tincidunt. Etiam blandit sodales mauris eget vestibulum. Etiam tempor, nulla sed ultricies dignissim, enim lacus pretium tortor, ac fringilla arcu dui at est. Ut sollicitudin et tellus vel blandit. Nunc lacinia metus varius dolor varius dictum. Curabitur accumsan felis ac augue dignissim sollicitudin. Integer feugiat augue nec purus vehicula aliquet. Ut lacinia leo semper mauris lacinia, vel varius urna lacinia. Fusce gravida metus nec scelerisque sodales. Etiam malesuada orci nec laoreet sodales. Sed ac lobortis metus. Nulla eu accumsan elit, blandit vehicula leo. Praesent tristique metus sit amet nulla dapibus, accumsan sagittis odio ullamcorper.
        Sed dapibus mattis mi. Ut eu metus sem. In gravida non dolor nec pulvinar. Suspendisse egestas mauris mattis pulvinar pharetra. In euismod libero sed euismod adipiscing. Etiam et mauris odio. Phasellus et tincidunt libero. Suspendisse potenti. Etiam sed metus ultricies, bibendum urna in, venenatis est. In vestibulum at mauris ac aliquam. Nunc lobortis metus enim, sed scelerisque nisi ullamcorper non. Donec velit metus, mollis ut arcu ac, varius semper risus. Sed vehicula pharetra quam, non adipiscing ligula fringilla sit amet. Vivamus tincidunt urna eu elit tincidunt dignissim.
        </div>

    </div>
</div>



</div>


 </body>
</html>

Answer 2

您可以尝试使用iScrollview。它是jQuery mobile的一个插件，它使您能够设置具有简单数据属性绑定的iScroll。

是否可以使用jquery mobile在div竞争中添加iscroll库？

2 个答案: