2012-10-25 13 views
5

Mam przewijany div, który chcę przewinąć w dół o 50 pikseli co X sekund. W porządku i działa.jQuery - przewijanie w dół co x sekund, a następnie przewijanie do góry

Mam również oddzielną funkcję, która przewija div z powrotem na górę, gdy dojdzie do dna. Też dobrze; pracujący.

Teraz muszę połączyć te dwa elementy, aby zignorować scrolldown, dopóki nie przewiniemy ponownie do góry.

mam 'pracuje' przykład tutaj, a zobaczysz, że ma jakiś dość orzechowy zachowanie: http://jsfiddle.net/JVftf/

window.setInterval(scrollit, 3000); 

function scrollit() { 
    $('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow'); 
} 

$('#scroller').bind('scroll', function() { 
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
     $('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000); 
    } 
}); 

Odpowiedz

4

Moja wersja:

var scrollingUp = 0; 

window.setInterval(scrollit, 3000); 

function scrollit() { 
    if(scrollingUp == 0) { 
     $('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow'); 
    } 
} 

$('#scroller').bind('scroll', function() { 
    $('#status').html(scrollingUp); 

    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { 
     scrollingUp = 1;  
     $('#scroller').delay(2000).animate({ scrollTop: 0 }, 1000, function() { 
      scrollingUp = 0;  
     }); 
    } 
});​ 

Demo: http://jsfiddle.net/EFmeK/

Btw, w twoim jsfiddle przewija 60px zamiast 50px, które "naprawiłem" w moim przykładzie.

+0

Idealny. Dodatkowe nagrody za naprawienie mojej literówki. –

2

spróbować czegoś takiego: http://jsfiddle.net/JVftf/3/

window.setInterval(scrollit, 1000); 

function scrollit() { 
    console.log(($("#scroller").scrollTop() + $("#scroller").innerHeight())) 
    console.log($("#scroller")[0].scrollHeight) 

    if(($("#scroller").scrollTop() + $("#scroller").innerHeight()) >= $("#scroller")[0].scrollHeight) 
     $('#scroller').animate({ scrollTop: 0 }, 100).delay(900); 
    else 
     $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 60 }, 'slow',function(){ 

    }); 
} 
+0

Wygląda dobrze w chrome, ale nie wydaje się działać w ogóle w IE9. –

Powiązane problemy