[jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

Tiffany Dicks · 5. Februar 2016

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

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

Anzeige

raid-rush · 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.

Tiffany Dicks · 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?

Tiffany Dicks · 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?

Nützliche Suchen

[jQuery] Durch Div scrollen und an bestimmter Stelle anhalten

Videos zum Themenbereich