是否有可能使用jquery mobile在div競爭中添加iscroll庫？

-1

你可以請告訴我，這是可能的添加iscroll在div競爭使用jQuery的手機。我發現這個解決方案 http://mobile.tutsplus.com/tutorials/mobile-web-apps/introduction-to-iscroll/ ，但它不適合我。其實我都知道有默認的jQuery iscroll。但它工作在IOS罰款android系統，所以我需要在android系統添加iscroll。是否有可能使用jquery mobile在div競爭中添加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>

來源

2013-08-21 Rohit

編輯＃1滾動DIV的內容，而不是列表項

編輯＃2：警告當內容被滾動到年底

這是我如何設置iScroll在JQM。它也適用於我的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-21 12:05:52 Drew

但你創建UL裏。我需要一個DIV – Rohit

沒關係。任何你放入「scroller」div的內容都會滾動（如果所有內容都不適合可視區域）。我刪除了

..，並將其替換爲lorum ipsum的幾個段落的div，並按預期滾動div內容 – Drew

ya我檢查它是否正常..是否有任何方法檢查結束爭辯。如果我終止競爭，我需要得到事件。我想用iscroll – Rohit

您可以嘗試使用iScrollview。它是jQuery mobile的一個插件，它爲您提供了使用簡單的數據屬性綁定來設置iScroll的能力。

來源

2013-08-21 12:09:53

是否有可能使用jquery mobile在div競爭中添加iscroll庫？

回答

相關問題