How to set the scroll position of a div with text?


  • I have a div that gets text added to it dynamically that should always scroll to the bottom. In my code I call scrollIntoView(false) on the element after adding any text, and it scrolls correctly. However, if the div is on another page in a FlipView control, and the other page is not currently being viewed, the scrollIntoView method flips to the page with the div, and then scrolls to the bottom. 

    How can I make it so it scrolls to the bottom without switching pages?

    My current work-around is to only scroll to bottom if the page with the div is the currentPage of the FlipView, and then scroll to bottom once that page is switched to. However there is a noticeable delay when switching to the page with the div and it takes about half a second to scroll to the bottom after the flip. I would like to get rid of this delay.

    Really, the text should always be scrolled to the bottom, since I should be able to "peek" at the page with my fingers and then cancel the flip before actually flipping completely.

    Saturday, May 12, 2012 8:30 PM


  • Hi,

    scrollIntoView will bring the element into view. If that’s not a desired behavior, we can set the element’s scrollTop to its scrollHeight, then it will scroll to the bottom.

    element.scrollTop = element.scrollHeight;

    However, if we use a FlipView, we cannot do that if the element is not displayed. It will have no effect. We need to wait for the page to be selected.

        function pageselected(sender) {
            var divElement = sender.target.getElementsByClassName("longDiv")[0];
            divElement.scrollTop = divElement.scrollHeight;

    We may see a bit delay.

    Best Regards,

    Ming Xu.

    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    • Marked as answer by poker421 Tuesday, May 15, 2012 5:14 AM
    Monday, May 14, 2012 10:11 AM