iScroll सामग्री स्क्रॉल नहीं कर रहा है, बस शीर्ष पर वापस जाएँ

Question

मैंने इस पर फ़ोरम का एक समूह पढ़ा है लेकिन किसी ने भी मेरी समस्या हल नहीं की है। मुझे यकीन है कि इसके कुछ छोटे मैं

यहाँ याद कर रहा हूँ iscroll आरंभीकरण है कर रहा हूँ:

.pi_panel.large .content{ 
position: absolute; 
width: 963px; 
height: 616px; 
top: 65px; 
left:30px; 
background:none; 
/*background:url(../images/ISI_body.png) repeat-y;*/ 
overflow:scroll; 
    -webkit-border-radius: 0px; 

}

#FullPiWrapper 
{ 
    position:relative; 
    z-index: 1; 
    overflow:hidden; 
    top: 60px; 
    width:980px; 
    height: 610px; 
} 

.pi_panel .pi_box{ 
padding: 0px; 
margin: 20px 0px; 

}

:

// make PI scroll 
piScroll2 = new iScroll('pi_scroll2'); 

यहाँ मेरी सीएसएस है

यहां मेरा एचटीएमएल है:

<!-- BEGIN: PI PANEL LARGE --> 
    <div class="pi_panel large"> 
    <div class="topBarPiFull"> 
       <div class="title">Full Prescribing Information</div> 
       <div class="close_button_fullpi">Close</div> 
       <div class="annotated_pi_button">Annotated PI</div> 
      </div> 
<!--   <div class="popContent"></div>--> 
      <div class="content" id="FullPiWrapper"> 

       <div id="pi_scroll2"> 


        <div class="pi_box" > 
         <img src="_globals/images/PI/pi_1.png"/> 
         <img src="_globals/images/PI/pagebreak.png" /> 
         <img src="_globals/images/PI/pi_2.png"/> 
         <img src="_globals/images/PI/pagebreak.png" /> 
         <img src="_globals/images/PI/pi_3.png"/> 
         <img src="_globals/images/PI/pagebreak.png"/> 
         <img src="_globals/images/PI/pi_4.png"/> 
         <img src="_globals/images/PI/pagebreak.png"/> 
         <img src="_globals/images/PI/pi_5.png"/> 
         <img src="_globals/images/PI/pagebreak.png" /> 
         <img src="_globals/images/PI/pi_6.png"/> 
         <img src="_globals/images/PI/pagebreak.png" /> 
         <img src="_globals/images/PI/pi_7.png"/> 
         <img src="_globals/images/PI/pagebreak.png" /> 
         <img src="_globals/images/PI/pi_8.png"/> 
         <img src="_globals/images/PI/pagebreak.png" /> 
         <img src="_globals/images/PI/pi_9.png"/> 
         <img src="_globals/images/PI/pagebreak.png" /> 
         <img src="_globals/images/PI/pi_10.png"/> 
        </div> 
       </div> 

      </div> 
    </div> 
    <!-- END: PI PANEL LARGE --> 

Answer 1

समस्या यह थी कि पृष्ठ के पहले लोड होने पर आपके पास कोई भी माता-पिता का डिवीजन डिस्प्ले 'none' पर सेट नहीं हो सकता है। तो मैंने प्रदर्शित करने के लिए 'pi_panel big' सेट किया: 'ब्लॉक';

Answer 2

अपने रैपर को ऊंचाई दें, यह सिर्फ मेरे लिए काम करता है।

.wrapper1 { 
    position:absolute; z-index:1; 
    top:250px; bottom:0px; left:3%; 
    margin-left:25px; 
    width:100%; 
    background:none; 
    overflow:auto; 
    height:100px; 
} 

Answer 3

"div प्रदर्शन कोई नहीं" समस्या के समाधान प्राप्त करने के लिए, आदि अपने ग्रिड, div में डेटा लोड करने के बाद निम्न उपाय अपनाते हैं,:

  myScroll.refresh(); 
      myScroll.scrollTo(0, 0, 1000); 

myScroll कहाँ लोड किया गया है:

var myScroll = new iScroll ('friendsWrapperDrug', {डेस्कटॉप कॉम्पैबिलिटी: सच, vScroll: true, hScroll: false, hScrollbar: false, lockDirection: true});

Answer 4

मेरे लिए काम करने वाला एक और समाधान सेटटाइमआउट के साथ iScroll init फ़ंक्शन को लपेट रहा है। यह iScroll लागू होने से पहले ब्राउज़र को तत्व प्रस्तुत करने के लिए कुछ समय देगा।

Answer 5

सुनिश्चित करें कि कंटेनर की ऊंचाई रैपर की ऊंचाई से अधिक है यानी height:100% न बनाएं। उदाहरण के लिए, यदि रैपर में कंटेनर होता है, और कंटेनर में 10 divs होते हैं:

यदि प्रत्येक divs 100px है तो रैपर 150px हो सकता है। फिर कंटेनर यह समस्या तब होती है जब आप अपने wrapper के लिए एक container div है इस के लिए ठीक 99% को container की ऊंचाई निर्धारित करने के लिए है 1000 पिक्सेल हो गया है (% नहीं 100!)

Answer 6

myScroll.refresh(); 
myScroll.scrollTo(0, 0, 0); 

Answer 7

।

#productsScreen{ /* my container */ 
    height: 99%; 
    z-index: 1; 
    top: 0px; 
    left: 0; 
    overflow: auto; 
} 
#productListWrapper{ 
    background:transparent; 
    position:absolute; 
    z-index:1; 
    top: 88px; 
    bottom:49px; 
    left:0; 
    width:100%; 
    overflow:auto; 
} 
#productsListScroller { 
    position:absolute; z-index:1; 
    -webkit-tap-highlight-color:rgba(0,0,0,0); 
    width:100%; 
    padding:0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    box-sizing: border-box; 
} 

आशा है कि मदद करता है:

बाद सीएसएस जो अंत में मेरे लिए यह समस्या ठीक है!