-1

你能告诉我这是否可以使用 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>
4

2 回答 2

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>
于 2013-08-21T12:05:52.370 回答
0

您可以尝试使用iScrollview。它是 jQuery mobile 的一个插件，它为您提供了通过简单的数据属性绑定设置 iScroll 的能力。

于 2013-08-21T12:09:53.913 回答