DIV with overflow: auto stop scrolling when content added

Question

I have a DIV container with style="overflow: auto" inside of an asp:UpdatePanel triggered by an asp:Timer

The contents of the DIV are updated every second but once the contents overflow the div width and height constraints the DIV is automatically scrolling back to top with every content addition; I want it to stay where the scroll is currently set, or even better keep the bottom content of the DIV visible.

I've tried to use some javascript to manipulate scrollTop with scrollHeight but it creates an unusable DIV object as auto scrolling is always happening.

I could add some javascript to not auto scroll down onfocus but that wouldn't fix the auto scrolling to the top of the DIV content when new content is added.

I have to use ASP.NET objects for all of the ajax but I have jQuery 1.7 (latest version) to supplement any functionality.

See if this helps out: http://www.codeproject.com/Articles/30235/Maintain-GridView-Scroll-Position-and-Header-Insid — Christopher Rathermel, Jun 22 '12 at 18:04
http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily — folex, Jun 22 '12 at 18:11
I checked out the first one and it seems more like a hack, the second link @folex doesn't seem to apply to what I'm doing as their talking about the whole page, I'm dealing with dynamically loading content in a DIV that is auto-scrolling back up top. Thanks! — Brian, Jun 22 '12 at 18:15
Seems like if the asp:UpdatePanel were inside the div the scroll position of the div wouldn't get reset when the UpdatePanel content gets dynamically updated. Can you put the UpdatePanel inside the div? — hmqcnoesy, Jun 22 '12 at 19:50
You can disable or enable whenever you want to, there is only methods in the link. — folex, Jun 22 '12 at 22:51

score 0 · Answer 1 · answered Jun 23 '12 at 05:51

You need _endRequest, _beginRequest Handlers. In code behind add this.

public object endRequestHandle { get; set; }

public object beginRequestHandle { get; set; }

In your aspx page, add this:

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
        function beginRequestHandle(sender, Args) {
           //call any function if you want before Ajax update/request begins
        }

        function endRequestHandle(sender, Args) {
         //Call the function to scroll the div all the way down
        }

DIV with overflow: auto stop scrolling when content added

1 Answers1