È possibile scorrere fisso 3 voci di elenco in uno scorrimento temporale utilizzando il registratore

Please Help me per scorrere l'elemento dell'elenco fisso utilizzando iscroll. Sto lavorando su un progetto in cui voglio scorrere tre articoli LIST in una volta scorrere usando l'eseguitore. Ho già provato a scorrere con scrollTo, ScrollToPage, ScrollToElement funzione di iscroller ma non ha funzionato per me quindi per favore aiutami a scorrere l'articolo a lunghezza fissa su una sola volta scroll.Io sto lavorando su progetto Android e sto usando iscroll4 a scorrere l'elemento.È possibile scorrere fisso 3 voci di elenco in uno scorrimento temporale utilizzando il registratore

My Cade è come questo ...

<!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>

fonte

2013-10-21 user2075328

please help me, se qualcuno sa la risposta. – user2075328

http://jsfiddle.net/amnishyadav/dWYJS/ questo js fiddle link – user2075328

non è molto chiaro cosa vuoi ottenere con questo, quindi stai cercando di far scorrere ciascuna casella da sola o tutte insieme? –

Se nel mese di ottenere in modo corretto, si vuole scattare ogni 3 elemento nella finestra iscroll.

non riesco a pensare a un modo elegante per fare questo (non so se c'è un'opzione che permette di impostare il numero di elementi da ignorare prima di scattare)

Ma si potrebbe (a seconda di come si è flessibile modificando leggermente il markup) sposta questi tre elementi come figlio di ogni "li".

Heres il link al violino js (http://jsfiddle.net/QFz3L/1/)

HTML/CSS/JS sotto.

Non C'è molta differenza in CSS e JS, Solo alcune modifiche in 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>

CSS:

.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; 
}

JS:

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

     });

Speranza questo aiuta

Acclamazioni Varinder

fonte

2013-12-17 02:14:21 Varinder

grazie bro non funziona come voglio ma è la soluzione migliore per fare questo compito. – user2075328

Ehi amico, scusa forse non sono riuscito a salvare il violino. aggiornato di nuovo http://jsfiddle.net/QFz3L/1/ – Varinder

Grazie amico funziona davvero bene .. – user2075328

È possibile scorrere fisso 3 voci di elenco in uno scorrimento temporale utilizzando il registratore

risposta

Problemi correlati