Question

When you active real-time updates, new entries dynamically adding a div. At this stage scroll is automatically moving. This action provides the content you do not miss on visible area.

If you want to see this action, you can also watch this screencast; http://www.viddler.com/explore/itod/videos/45/

My method;

    // 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

I assume you want to scroll smoothly to the top instead of jumping to solve flashing . I would do something like this:

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 [];
}

友情链接