[jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Tiffany Dicks, 5. Februar 2016 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 5. Februar 2016
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    Hi,

    in einem Spin & Win System möchte ich dem Kunden anzeigen was er gewonnen hat.

    Dadurch scrolle ich per jQuery durch ein Div das so aussieht.

    HTML:
    <div class="scroller">
    <div class="gewonnen-1">1</div>
    <div class="gewonnen-2">1</div>
    <div class="gewonnen-3">1</div>
    
    </div>
    
    per
    Code:
    function scroll(){
     $('.scroller').scrollLeft(0);
     $('.scroller').stop().animate({scrollLeft:310},500,'linear',scroll);
    }
    scrolle ich durch das Div

    Es sieht um den Dreh wie folgt aus

    ATzSv.gif

    Jetzt möchte ich eine Funktion haben like holdOnDiv der ich sagen kann 1 2 3 ... und die Scroll Animation scrollt dann bis zu dem gewonne-x div und hält an.

    Mein Versuch der logisch nicht geht (hab da schon zu oft dran rumgefummelt) Es hält auch an nur an der falschen Stelle.

    Code:
    function ScrollToDiv(div){
     
     switch(div){
     
     case 1:
     var posi = $('.won-3').width()+5;
     break;
     
     case 2:
     var posi = $('.won-1').width()+5;
     break;
     
     case 3:
     var posi = $('.won-2').width()+5;
     break;
     
     }
     
     $('.scroller').stop();
     $('.scroller').animate({
     scrollLeft: posi
     }, 700, function(){
     
     });
     
    
    }
    Bitte um Hilfe
     
  2. 5. Februar 2016
    AW: [jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

    die posi stimmt nicht, weil du nur immer die width der jeweiligen div erhälst aber das div ja an zb zweiter position ist, also muss der scrollLeft natürlich auch die ersten position width eingerechnet sein.

    also die erste stelle würde passen, zweite muss plus die erste width und dritte plus erste und zweite.

    nebenbei: die class heißt im html code nicht won-1 sondern gewonnen-1 und ich würde besser #id's anstelle von .class verwenden.
     
  3. 5. Februar 2016
    AW: [jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

    Ok ok ... Danke soweit ...

    Es sieht jetzt so aus (Codetechnisch).

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>Demo by roXon</title>
    </head>
    <body>
     
     
     
     <div class="scroller">
     <div id="won-1">DIV 1</div>
     <div id="won-2">DIV 2</div>
     <div id="won-3">DIV 3</div>
     </div>
     
     <button>Go</button>
     <button>Stop 1</button> <button>Stop 2</button> <button>Stop 3</button>
     
     
    </body>
    </html>
    Code:
    *{margin:0;padding:0;}
    
    .scroller{
     width:310px;
     height:76px;
     white-space:nowrap;
     overflow:hidden;
     margin:30px;
     background:#000;
    }
    .scroller > div{
     width:300px;
     height:70px;
     margin:3px;
     display:inline-block;
     *display:inline;
     zoom:1;
     color:#fff;
     text-align:center;
     background:#444;
    }
    Code:
    function scroll(){
     $('.scroller').scrollLeft(0);
     $('.scroller').stop().animate({scrollLeft:310},5000,'linear',scroll);
    }
    
    scroll();
    
    function ScrollToDiv(div){
    var posi = 0; 
     switch(div){
     
     case 1:
     posi = 5;
     break;
     
     case 2:
     posi = $('#won-1').width()+5;
     break;
     
     case 3:
     posi = $('#won-1').width()*3+5;
     break;
     
     }
     
     $('.scroller').stop();
     $('.scroller').animate({
     scrollLeft: posi
     }, 4000, function(){
     
     });
     
    
    }
    $('button').on('click', function(){
     switch($(this).html()){
     
     case 'Go':
     scroll();
     break;
     
     case 'Stop 1':
     ScrollToDiv(1);
     break;
     
     case 'Stop 2':
     ScrollToDiv(2);
     break;
     
     case 'Stop 3':
     ScrollToDiv(3);
     break;
     
     }
    });
    Es funktioniert aber es gefällt mir noch nicht ...

    Das liegt daran das es mal nach links und mal nach rechts scrollt. Also wenn ich bei zwei bin scrollt es bei Klick auf 1 nach links bei klick auf zwei aber nach Rechts. Kann man das irgendwie verhindern? Also dafür sorgen das es immer nach links oder rechts scrollt?
     
  4. 6. Februar 2016
    AW: [jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

    Folgendes Problem. Es stoppt immer die Animation ist ziemlich ruckelig bekommt man das irgendwie besser hin? Also flüssiger?
     
  5. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.