2012-10-25 24 views
5

पर स्क्रॉल करें मेरे पास एक स्क्रोल करने योग्य div है जिसे मैं हर एक्स सेकंड में 50 पिक्सल स्क्रॉल करना चाहता हूं। यह ठीक है और काम कर रहा है।jQuery - प्रत्येक एक्स सेकंड को नीचे स्क्रॉल करें, फिर शीर्ष

मेरे पास एक अलग कार्य भी है जो नीचे पहुंचने पर div को शीर्ष पर स्क्रॉल करता है। भी ठीक; काम कर रहे।

अब, मुझे दोनों को गठबंधन करने की आवश्यकता है ताकि स्क्रोलडाउन को अनदेखा कर दिया जाए जब तक कि हम शीर्ष पर स्क्रॉल नहीं कर लेते।

मैं एक 'काम कर रहे' उदाहरण यहाँ है, के रूप में आप यह कुछ बहुत अखरोट के स्वाद का व्यवहार है देखेंगे: 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); 
    } 
}); 

उत्तर

4

मेरे संस्करण:

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;  
     }); 
    } 
});​ 

डेमो: http://jsfiddle.net/EFmeK/

बीटीडब्ल्यू, आपके जेएसफ़िल्ड में, यह 50px के बजाय 60px स्क्रॉल करता है, जिसे मैंने अपने उदाहरण में "निश्चित" किया है।

+0

बिल्कुल सही। मेरे टाइपो को ठीक करने के लिए अतिरिक्त कुडोस भी। –

2

ऐसा ही कुछ प्रयास करें: 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

क्रोम में अच्छा लग रहा है, लेकिन IE9 में बिल्कुल काम नहीं करता है। –

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