फोन अंतराल में iscroll जावास्क्रिप्ट का उपयोग कैसे करें?

Question

मैं सीएसएस पद के लिए एक उपचारात्मक प्रक्रिया के रूप में अपने आवेदन के लिए iscroll जावा स्क्रिप्ट को लागू करने की कोशिश की है: कॉर्डोबा का उपयोग कर तय कि एंड्रॉयड 2 और 3 के संस्करणों में काम नहीं करता है 2.1.0

मैं नकल की है से here

एचटीएमएल कोड

<div id="wrapper" class="wrapper"> 
<div id="wrapper-container" class="wrapper-container"> 
    <div id="header" class="header"> 
    <div id="header_title" class="header_title"> </div> 
    <div id="abc" class="abc"><img src="img/abc.png""/>      </div> 
</div> 
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; /> 
</div> 
<div id="description" class="description"> 
<div id="title" class="title"> 
    <h1><strong></strong></h1> 
</div> 
<div id="desc" class="desc"> 
</div> 
</div> 

<div id="footer" style="background-image:url(img/bar.png);" class="footer"> 
<div id="footer_text" class="footer_text">footer_text</div> 
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div> 
</div> 
</div> 

iscroll-लाइट का जावास्क्रिप्ट

desc टैग की सामग्री स्क्रॉल पर iscroll

<script type="text/javascript" charset="utf-8" src="iscroll.js"></script> 
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script> 


var myScroll; 
document.addEventListener("deviceready", onDeviceReady, false); 
function scroll() 
{ 
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true}); 
} 
---- 
---- 
function onDeviceReady() 
{ 
    scroll(); 
    ---- 
    ---- 

का उपयोग

सीएसएस

.wrapper 
{ 
    position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden; 
} 
.wrapper_other 
{ 
    width:auto; margin:0 auto; height:100%; overflow: hidden; 
} 
.wrapper_container 
{ 
    width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif; 
} 
.header 
{ 
    float:left; height:100%; min-height:100%; margin:0%; width:96%; padding:3% 2% 0; 
} 
.header_title 
{ 
    float:left; padding:0%; margin:0%; height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%; 
} 

.images 
{ 
    position:relative; width:100%; 
} 
.description 
{ 
    float:left; width:100%; overflow:auto; height:100%; 

} 
.title 
{ 
    width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF; 
} 
.desc 
{ 
     width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px; 
} 
.desc p 
{ 
     margin-top:0; 
} 
.footer 
{ 
    width:100%; position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px; 
} 
.footer_text 
{ 
    text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%; 
} 
.info 
{ 
    width:25%; float:right; padding-top:1%; 
} 

अतिप्रवाह हो रहा है, मैं सिर्फ निम्नलिखित मिल

W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down. 

समस्या:

यह scrolling.If उस पर महान प्रयास लेकिन, यह स्क्रॉल केवल वापस मुख्य पृष्ठ पर जाने के लिए और वापसी once.I के बाद सब पर यह है कि यह नहीं करता है बिल्कुल स्क्रॉल नहीं करें।

कृपया, मुझे गाइड करें !!

संपादित करें: इस मैं ली टैग के रूप में विभिन्न combinations..replacing सभी divs में की कोशिश की है ... सीएसएस कारगर नहीं था। फिर प्रत्येक div के भीतर ली टैग का इस्तेमाल किया। कोई फायदा नहीं ... यह स्क्रॉल नहीं किया .:

<div id="wrapper"> 
<div id="scroller"> 
<ul> 
    <div id="header " class="header "> 
    <div id="header_title" class="header_title"> </div> 
    <div id="xyz" class="xyz"><img src="img/xyz.png" onClick="xyz()"/></div> </div> </ul> 

<ul> 
     <div id="images" class="images"><img name="slide" src="img/banner1.png" width=100%; /> 
    </div> 
</ul> 

<ul> 
    <div id="param" class="param"> 
    <div id="abc" class="abc noSelect"> </div> 
     <div id="def" class="def noSelect" > </div> 
     <div id="ghi" class="ghi noSelect" > </div> 
     <div id="ijk" class="ijk noSelect" > </div> 
    </div> 
</ul> 

<ul> 
    <div id="description" class="description"> 
     <div id="title" class="title"> 
    <h1><strong><li></li></strong></h1> 
     </div> 

    <div id="desc" class="desc"> 
    <p><li></li> </p> 
    </div> 
</div> 

</ul> 

Answer 1

आप संरचना कि iScroll के लिए पूछता है निम्न होने के लिए नहीं है। iScroll पेज विशेष रूप से उल्लेख है (बोल्ड पाठ पर ध्यान दें):

इष्टतम iScroll संरचना होती है:

<div id="wrapper"> 
    <ul> 
     <li></li> 
     ... 
     ... 
    </ul> 
</div> 

इस उदाहरण यूएल तत्व स्क्रॉल किया जा होगा। स्क्रॉलिंग क्षेत्र के रैपर पर iScroll होना चाहिए।

महत्वपूर्ण: केवल रैपर तत्व का पहला बच्चा स्क्रॉल होगा। आप निम्नलिखित संरचना उपयोग कर सकते हैं आप स्क्रोलर अंदर अधिक तत्वों की जरूरत है:

<div id="wrapper"> 
    <div id="scroller"> 
     <ul> 
      <li></li> 
      ... 
      ... 
     </ul> 

     <ul> 
      <li></li> 
      ... 
      ... 
     </ul> 
    </div> 
</div> 

इस उदाहरण स्क्रोलर तत्व स्क्रॉल किया जाएगा (एक साथ के साथ दो ULS) में।

आपके पास:

<div id="wrapper" class="wrapper"> 
    <div id="wrapper-container" class="wrapper-container"> 
    ... head ... 
    </div> 

    ... (your main div here) ... 
</div> 

तो आपका मुख्य div iScroller से स्क्रॉल नहीं की जाएगी, आप केवल शीर्ष लेख div स्क्रॉल कर रहे हैं। iScroll demo पर एक नज़र डालें और इसे पहले जांचें ... क्या यह आपके डिवाइस के लिए ठीक काम करता है? यदि हां, तो इसकी संरचना का पालन करने का प्रयास करें।

Answer 2

आपके द्वारा पोस्ट किए गए स्क्रिप्ट कोड में, मुझे एक गलती मिली है। मुझे नहीं पता कि यह गलती आपकी वास्तविक फ़ाइल में भी उपलब्ध है या नहीं। लेकिन पहले एक साझा करने के लिए सोचा।

यह आपका स्क्रिप्ट कोड है।

myScroll = नया ISCroll ('। Wrapper', {scrollX: false, scrollY: true});

गलती मैं पाया है

• .wrapper CSS नियम का नाम है। आप यहां ID पास करने के लिए बेहतर हैं। मान लेंगे कि IDiScrollWrapper फिर स्क्रॉलर को निम्न प्रारूप में सक्षम करें।

myScroll = नए IScroll ('iScrollWrapper', {scrollX: झूठे, scrolly: सच});

अब iScroll लिए अच्छी DOM structure (एचटीएमएल प्रारूप) देखेंगे जो आपको परेशानी नहीं है और अभी भी W3C valid

विकल्प 1

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******"> 
    <ul> 
     <li> 
      <YOUR_REMAINING_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED> 
     </li> 
    </ul> 
</div> 

विकल्प 2

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******"> 
    <ul> 
     <li> 
      <YOUR_ONE_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED> 
     </li> 
     <li> 
      <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED> 
     </li> 
     <li> 
      <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED> 
     </li> 
    </ul> 
</div> 

होगा बहुत पहले आपको लगता है कि आपको करना है

****** IMPORTANT_POINT_1 ****** 

तत्व को जो आप iScroll देते गैर स्थिर, गैर निश्चित स्थिति का प्रकार (उपयोग कर सकते हैं 'relative' या 'absolute') होना चाहिए। यही कारण है कि तत्व pixel में height होना चाहिए (आप min-height या max-height लेकिन कोई **height**iScroll खेद का कहना है कि हो जाएगा। यह काम नहीं करेगा)

अब कैसे आप iScroll संलग्न कर सकते हैं देखेंगे।

iScroll संलग्न का अच्छा तरीका है इस प्रकार है (यह है कि मैं क्या सीखा है जब मैं तत्वों के लिए iScroll लागू)

आप Single Page Application (SPA) उपयोग कर रहे हैं तो

if('undefined' != typeof iScrollerObject){ 
    iScrollerObject.destroy(); 
} 
iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */}); 

आप अपने सदस्य के रूप में iScrollerObject करते हैं एसपीए अनुप्रयोग में परिवर्तनीय

var _this = this; 
if(null != _this.iScrollerObject){ 
    _this.iScrollerObject.destroy(); 
} 
_this.iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */}); 

मानक के लिए उपयोग करें एल ब्राउज़र पेज।

var iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */}); 

आप प्रभावी रूप से अपडेट यदि सामग्री तो अपने विकल्पों में checkDOMChanges : true का उपयोग करें। यदि अभी भी गतिशील DOM परिवर्तन के लिए स्क्रॉलर को अपडेट करने में विफल रहा है तो उस गतिशील DOM परिवर्तन कॉल को पूरा करने के बाद iScrollerObject.refresh();

मैंने अपने अनुभव में iScroll के बारे में जो कुछ सीखा है, उसे साझा किया है। अगर आपको किसी की ज़रूरत है तो कृपया मुझे बताएं। कृपया याद रखें कि आप iScroll lite संस्करण का उपयोग कर रहे हैं जिसमें वास्तव में मानक iScroll4 से कम सुविधाएं हैं। यदि आप iScroll संस्करण का उपयोग करना चाहते हैं तो iScroll4 पर जाएं।