如何製作像窗口滾動控制系統的朋友飼料？

Question

當你主動實時更新時，新的條目動態添加一個div。在這個階段，滾動自動移動。此操作提供了您在可見區域不會錯過的內容。

如果你想看到這個動作，你也可以看這個截屏; http://www.viddler.com/explore/itod/videos/45/

我的方法;

// Firstly, i am storing the first entry's(in view) positions in window object; 
jQuery(window).scroll(function() { 
    var q = 0; 
    jQuery(".entry").each(function (i) { 
    if (jQuery(this).offset().top > jQuery(window).scrollTop()) { 
     if (q == 0) { 
     window.show_id = jQuery(this).attr("id"); 
     window.pos_y = jQuery(this).offset().top - jQuery(window).scrollTop(); 
     q = 1; 
     } 
    } 
    }); 
    }); 

// After coming to the new entry, i call this function; 
function scroll_control() { 
    var scroll_top = jQuery(window).scrollTop(); 
    if (scroll_top != 0) { 
    if (jQuery('#'+window.show_id).length != 0) { 
     var scr = jQuery('#'+window.show_id).offset().top - window.pos_y; 
     window.scrollTo(0, scr); 
    } 
    } 
} 

// but this is due to flashing. I guess not fast enough 

Answer 1

我假設你想順利滾動到頂部而不是跳躍來解決'閃爍'。我會做這樣的事情：

function scroll_control() { 
    var scroll_top = jQuery(window).scrollTop(); 
    if (scroll_top != 0) { 
    if (jQuery('#'+window.show_id).length != 0) { 
     var scr = jQuery('#'+window.show_id).offset().top - window.pos_y; 
     // Instead of jumping to src use jQuery animate 
     // window.scrollTo(0, scr); 
     var scrollElem = scrollableElement('html', 'body'); 
     $(scrollElem).animate({scrollTop: scr}, 400); 
    } 
    } 
} 

/* 
* Use the first element that is "scrollable" (cross-browser fix?) 
* http://css-tricks.com/snippets/jquery/smooth-scrolling/ 
*/ 
function scrollableElement(els) { 
for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
    var el = arguments[i], 
    $scrollElement = $(el); 
    if ($scrollElement.scrollTop()> 0) { 
     return el; 
    } else { 
     $scrollElement.scrollTop(1); 
     var isScrollable = $scrollElement.scrollTop()> 0; 
     $scrollElement.scrollTop(0); 
     if (isScrollable) { 
      return el; 
     } 
    } 
} 
return []; 
}