क्या हम iscroller

का उपयोग कर एक बार स्क्रॉल पर निश्चित 3 सूची आइटम आइटम स्क्रॉल कर सकते हैं कृपया मुझे iscroll का उपयोग करके निश्चित सूची आइटम स्क्रॉल करने में सहायता करें। मैं एक ऐसे प्रोजेक्ट पर काम कर रहा हूं जिसमें मैं आईस्कोलर का उपयोग कर एक बार स्क्रॉल पर तीन लिस्ट आइटम स्क्रॉल करना चाहता हूं। मैंने पहले से स्क्रॉल करने के लिए स्क्रॉल करने की कोशिश की है, स्क्रॉलटॉपेज, स्क्रॉल टोलमेंट फ़ंक्शन आईस्क्रोलर है लेकिन यह मेरे लिए काम नहीं करता है, इसलिए कृपया मुझे एक बार उपयोगकर्ता स्क्रॉल पर निश्चित लंबाई आइटम स्क्रॉल करने में सहायता करें। मैं एंड्रॉइड प्रोजेक्ट पर काम कर रहा हूं और मैं iscroll4 का उपयोग कर रहा हूं तत्व स्क्रॉल करें।क्या हम iscroller

मेरे कैड इस तरह है ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 

<head> 


<style> 
.span8{ 
    position: absolute; 
    width:630px; 
    height:100px; 
    overflow:auto; 

} 
.menu{ 
    float:left; 
    width:200px; 
    height:100px; 
    background-color:red; 
    margin-left:10px; 
} 
#scroller{ 
    width:3000px; 
} 
</style> 

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

<script src="js/libs/iscroll.js" type="text/javascript"></script> 
<script> 
var isScrolling = false; 
     myScroll = new iScroll('headerWrapper',{ 
      snap: 'li',ome Wor 
      hScrollbar: false, 
      vScrollbar: false , 
      momentum: true, 
      vScroll: false, 
      onScrollMove : function(e){ 
//    clearHeaderInterval(); 
//    myScroll.scrollTo(50, 0); 
//    myScroll.refresh(); 

       console.log('onScrollMove===============>>>>>>>>>>>>>'); 
       isScrolling = true; 

       // here get the device type and version 
       if(deviceType() == 'android'){ 
        var deviceVersion = device.version; 

        console.log(" deviceType is ===>>"+deviceVersion); 
        if(deviceVersion=='4.1' || deviceVersion=='4.1.1'|| deviceVersion=='4.1.2'){ 
         console.log("android version is ===>>"+deviceVersion); 
        setTimeout(function(){ 
         myScroll.refresh(); }, 1000); 
        } 
       } 
       // setTimeout(function(){myScroll.refresh();},0); 
       }, 

     }); 
</script> 
</head> 
<body> 

<div class="span8 marginleft mid-menu-panel" id="headerWrapper"> 
       <div id="scroller"> 
        <ul id="tabitems"> 
         <li class="dropdown-toggle menu click_h" id="home"> 
          Home 
         </li> 

         <li class="dropdown-toggle menu click_h" id="word" > 
          Word 

         </li> 

         <li class="dropdown-toggle menu click_h" id="sentences"> 
          Sentence 
         </li> 

         <li class="dropdown-toggle menu click_h" id="icon"> 
          Icon 
         </li> 

         <li class="dropdown-toggle menu click_h" id="question"> 
          Question 
         </li> 

         <!--<li class="dropdown-toggle menu click_h" id="write_words">--> 
          <!--Write--> 
         <!--</li>--> 
         <li class="dropdown-toggle menu click_h" id="level" > 
          Level 
         </li> 
         <li class="dropdown-toggle menu click_h" id="config/" > 
          Configuration 


         <li class="dropdown-toggle menu click_h" id="info" > 
          Info 
         </li> 

         </li> 
         <li class="dropdown-toggle menu click_h" id="website"> 
          Web Services 
         </li> 

         <li class="dropdown-toggle menu click_h" id="help" > 
          Help 
         </li> 

         <!--td width="20"> 
         <div class="buttons next"> 
         <button class="btn btn-large right_arrow" type="button"> 
         <i class="icon_right_arrow"></i> 
         </button> 
         </div></td--> 

        </ul> 
       </div> 
      </div> 

</body> 
</html>

स्रोत

2013-10-21 user2075328

कृपया मेरी मदद करता है, तो किसी को भी उत्तर जानते हैं। – user2075328

http://jsfiddle.net/amnishyadav/dWYJS/ यह जेएस फीड लिंक – user2075328

यह इतना स्पष्ट नहीं है कि आप इसके साथ क्या हासिल करना चाहते हैं, तो क्या आप प्रत्येक बॉक्स को अपने आप या सभी को स्क्रॉल करने की कोशिश कर रहे हैं? –

im इसे सही ढंग से हो रही हैं, तो आप iscroll विंडो में हर 3 आइटम स्नैप करना चाहते।

मैं

(यदि वहाँ एक विकल्प है कि तड़क से पहले की अनदेखी करने के तत्वों की संख्या निर्धारित करने की अनुमति देता है यकीन नहीं) लेकिन आप (आप कैसे लचीले होते हैं पर निर्भर करता है हो सकता है यह करने के लिए किसी भी सुरुचिपूर्ण तरीका नहीं सोच सकते हैं मार्कअप को थोड़ा सा संशोधित करने के साथ) उन तीन तत्वों को प्रत्येक "ली" के बच्चे के रूप में ले जाएं।

यहाँ js बेला (http://jsfiddle.net/QFz3L/1/)

HTML/CSS/नीचे जे एस के लिए लिंक।

सीएसएस और जे एस में बहुत अंतर वहाँ नहीं है, बस कुछ परिवर्तन HTML में

HTML:

<div class="span8 marginleft mid-menu-panel" id="headerWrapper"> 
<ul id="scroller"> 
    <li class="menu"> 
     <div>block 1</div> 
     <div class="cf"> 
      <div class="span3"> 
       item 1 
      </div> 
      <div class="span3"> 
       item 2 
      </div> 
      <div class="span3"> 
       item 3 
      </div> 
     </div> 
    </li> 
    <li class="menu"> 
     <div>block 2</div> 
     <div class="cf"> 
      <div class="span3"> 
       item 4 
      </div> 
      <div class="span3"> 
       item 5 
      </div> 
      <div class="span3"> 
       item 6 
      </div> 
     </div> 
    </li> 
    <li class="menu"> 
     <div>block 3</div> 
     <div class="cf"> 
      <div class="span3"> 
       item 7 
      </div> 
      <div class="span3"> 
       item 8 
      </div> 
      <div class="span3"> 
       item 9 
      </div> 
     </div> 
    </li> 
</ul> 
</div>

सीएसएस:

.cf { 
    overflow:hidden; 
} 
.span3 { 
    float:left; 
    height:100px; 
    background:green; 
    width:210px; 
} 
.span8{ 
    position: absolute; 
    width:630px; 
    height:100px; 

} 
.menu{ 
    float:left; 
    width:630px; /* same as parent(.span8) to make sure only 1 .menu is visible ofc */ 
    height:100px; 
    background-color:red; 
} 
#scroller{ 
    width:1890px; /* total width of children, 630 * 3 */ 
    overflow:hidden; 
    list-style:none; 
    padding:0; 
    margin:0; 
}

जे एस:

 myScroll = new iScroll('headerWrapper',{ 
      snap: 'li', 
      hScrollbar: false, 
      vScrollbar: false , 
      momentum: true, 
      vScroll: false 

     });

आशा यह सहायता करता है।

चीयर्स वरिंदर

स्रोत

2013-12-17 02:14:21 Varinder

धन्यवाद भाई यह काम नहीं कर रहा है जैसे मैं चाहता हूं लेकिन यह कार्य करने के लिए बेहतर समाधान है। – user2075328

अरे दोस्त, क्षमा करें शायद मैं पहेली को बचाने में विफल रहा। फिर से अपडेट किया गया http://jsfiddle.net/QFz3L/1/ – Varinder

धन्यवाद दोस्त यह वास्तव में ठीक काम कर रहा है .. – user2075328

क्या हम iscroller

उत्तर

संबंधित मुद्दे