jquery - keep window from changing scroll position while prepending items to a list?

jquery get scroll position of div
jquery scroll to element in div
maintaining scroll position when adding content
jquery scroll bottom
javascript get scroll position of div
scrolltop offset
jquery scrollto
javascript maintain scroll position

I have a page that displays messages and I want it to work just like Facebook, but without the lazy loader. Messages are displayed in chronological order, most recent last.

My message list is initially populated x number of most recent messages, and the window is scrolled to the bottom. When the user starts to read the thread, they read from bottom to top. If they get to the top, they can load more messages... I make them click a button... facebook has a lazy loader. New messages are prepended to the list.

Problem: As the new messages are prepended, the existing messages are pushed down, causing the user to lose their "viewing" place. How can I keep the user's current view position as I add the new messages? For an example, open a long message thread in facebook, scroll to the top causing new messages to be added... your view location doesn't change even though the scroll position does.


Store a reference to the first message before you prepend new messages, and after you prepend, set the scroll to the offset of that message:

$(document).on('scroll', function() {
    var scroll = $(document).scrollTop();
    if (scroll < 1) {
        // Store eference to first message
        var firstMsg = $('.message:first');

        // Prepend new message here (I'm just cloning...)
        $('body').prepend(firstMsg.clone());

        // After adding new message(s), set scroll to position of
        // what was the first message
        $(document).scrollTop(firstMsg.offset().top);
    }
});

Demo: http://jsfiddle.net/GRnQY/

Edit: I noticed you wanted it with a button. You might have to do a little more math:

$(document).on('click', '#loadMore', function() {
    var firstMsg = $('.message:first');

    // Where the page is currently:
    var curOffset = firstMsg.offset().top - $(document).scrollTop();

    // Prepend
    firstMsg.before(firstMsg.clone());

    // Offset to previous first message minus original offset/scroll
    $(document).scrollTop(firstMsg.offset().top-curOffset);
});

Demo: http://jsfiddle.net/GRnQY/5/

Maintaining Scroll Position When Adding Content to the Top of a , jquery - keep window from changing scroll position while prepending items to a list? My message list is initially populated x number of most recent No need for jQuery here, just check for changes in the elements  I have a Div in which when a thumbnail is clicked the Div image replaces with another image via a JavaScript/jQuery script (I am not sure exactly maybe someone could clarify). This works fine however the problem is the page scrolls back to the top and the user then has to scroll back down to see the image after it has replaced itself.


No need for jQuery here, just check for changes in the elements scrollHeight and adjust the scrollTop accordingly, ie:

var lastScrollHeight = el.scrollHeight;
for(var n=0; n<10; n++){
    // Prepend here...
}
var scrollDiff = el.scrollHeight - lastScrollHeight;
el.scrollTop += scrollDiff;

Demo

http://jsfiddle.net/fkqqv28e/

jQuery

To access the native DOM node from a jQuery collection, use array access; ie:

var lastScrollHeight = $('#myElement')[0].scrollHeight;
for(var n=0; n<10; n++){
    $('#myElement').prepend('<div>prepended '+Math.random()+'</div>');
}
var scrollDiff = $('#myElement')[0].scrollHeight - lastScrollHeight;
$('#myElement')[0].scrollTop += scrollDiff;

jQuery scrollTop() Method, I recently had to create a widget that would lazy load content when scrolled to the top, and also maintain the currently The difficult part is that when adding content to the beginning of a parent And then a new item is added to the top ( A ): save the current scroll position and scrollHeight of the container  oodavid.com. Member for 8 years, jquery. Score 14. Posts 5. hugo. Score 9. keep window from changing scroll position while prepending items to a list?


Some folks coming here may just want to add content without the current focus jumping around. Modifying Jeff B's demo above to use the click event target makes this idiom more portable:

someButton.on('click', function() {
    var curOffset = $(this).offset().top - $(document).scrollTop();
    // add content to your heart's content.
    $(document).scrollTop($(this).offset().top-curOffset);
});

c.f. http://jsfiddle.net/bwz8uLvt/1/ (variant of Jeff B's demo above but with the [add more] button at an arbitrary point in the page).

jQuery API Documentation, Return the vertical scrollbar position for a <div> element: $("button").click(function the selected elements. Tip: When the scrollbar is on the top, the position is 0. Definition and Usage. The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0. When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element. When used to set


Here's a simple trick that worked for me:

// divWithTheScroll.prependElement...
divWithTheScroll.scrollTop += newlyPrependedElement.scrollHeight;

.scroll(), It makes things like HTML document traversal and manipulation, event handling, Register a handler to be called when Ajax requests complete with an error. This is Add a callback or a collection of callbacks to a callback list. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Back to Stack Overflow Return to the main site Tour Start here for a quick overview of the site


You could also keep the scroll position based on the offset to the bottom of the page/element.

var ScrollFromBottom = $(document).height() - $(window).scrollTop();

//ajax - add messages -- geenrate html code then add to dom

//set scroll position
$(window).scrollTop($(document).height() - ScrollFromBottom);

You Might Not Need jQuery, The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with A scroll event is sent whenever the element's scroll position changes,  The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).


Clusterize.js, Examples of how to do common event, element, ajax and utility operations with plain javascript. Questions: I have a RecyclerView. Each row has a play button, textview and Progressbar. when click on the play button have to play audio from my sdcard and have to progress Progressbar The problem is when i scroll down the recyclerview change the Progressbar in next row.means I can fit 5 items on the screen


Implementing Infinite Scrolling - Frontend Weekly, Instead of that - it splits the list to clusters, then shows elements for current scroll position and adds extra rows to top and bottom of the list to emulate full height of​  An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).


Element.scrollIntoView(), Similarly when user is scrolling up, we will prepend 10 items to the front of list removed, below elements should not change its position and should maintain  The same happens when toggling between full page and reduced iframe: if the state should change when reaching the new window size, it doesn't till scrolling happens. Then to avoid that, the computation for affecting/dropping bottom class should occur not only when document.scroll() but also window.resize() event happens.