jQuery的 - 停止徘徊

時，這是一個後續崗位上一個問題自動滾動的div：jQuery - scroll down every x seconds, then scroll to the top jQuery的 - 停止徘徊

我有一點點進一步完善了紙條，但我有與最後一步有點麻煩。

我有在，直到它到達底部，此時它滾動到頂部，再次啓動時自動50px的一個div。我非常感謝上述問題以及一些補充工作。

我需要讓所有的滾動停止時，DIV盤旋。我已經做了一部分（懸停沒有增量滾動），但我無法得到完整的圖片。即使徘徊，div仍會滾動到頂部。

這裏是我的jQuery和小提琴與它一起去：http://jsfiddle.net/wR5FY/1/

var scrollingUp = 0; 
var dontScroll = 0; 

window.setInterval(scrollit, 3000); 

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

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


$('#scroller').bind('mouseenter', function() { 
    dontScroll = 1; 
}); 

$('#scroller').bind('mouseleave', function() { 
    dontScroll = 0; 
});

在小提琴，嘗試徘徊在滾動div時黃色方塊是可見的。你會看到它滾動到頂部。

有兩點要注意：

你會發現我已經使用了mouseenter和鼠標離開，而不是懸停及移出。這是我能找到的最好的方式，以確保div內的所有兒童因素都沒有不利影響。
一個潛在的問題區域是我綁定到我的函數的滾動事件滾動到頂部的事實。我認爲這可能會導致一些額外的問題，當用戶手動滾動項目，我的jQuery試圖滾動對用戶。
我做了一些與殺戮的setInterval嘗試，但我沒有發現這是非常有幫助的觸發功能是沒有問題的區域。

我的總體目標是在用戶懸停或手動滾動列表時鎖定所有自動滾動功能。這是90％。如果它們碰巧滾動到底部，那麼在將鼠標移動到其他地方之前不應該發生任何事情 - 這是問題所在。

來源

2012-10-28 Alan Shortis

保持輕鬆;）的問題是，你先評估wheter dontScroll是零，然後開始計時。當計時器已經結束，它不評價了，dontScroll是否還爲零。只需將其拖入您的scrollIt功能：

var scrollingUp = 0; 
var dontScroll = 0; 

window.setInterval(scrollit, 2000); 

function scrollit() { 
    if(dontScroll == 0){ 
     if ($('#scroller').scrollTop() + $('#scroller').innerHeight() >= $('#scroller')[0].scrollHeight) { 
       scrollingUp = 1;  
       $('#scroller').animate({ scrollTop: 0 }, 1000, function() { 
        scrollingUp = 0;  
       }); 
     } else if(scrollingUp == 0) { 
      $('#scroller').animate({ scrollTop: $("#scroller").scrollTop() + 50 }, 'slow'); 
     } 
    } 
} 

$('#scroller').bind('mouseenter', function() { 
    dontScroll = 1; 
}); 

$('#scroller').bind('mouseleave', function() { 
    dontScroll = 0; 
});

來源

2012-10-28 17:02:25 niko

jQuery的 - 停止徘徊

回答

相關問題