locked
Update Panel Scrolling Issue RRS feed

  • Question

  • User-2131478286 posted

    I have an update panel with content that can sometimes become pretty long and make the user have to scroll.  If the user makes a change that causes a post within the update panel and then scrolls the page while the update is in progress it causes the page to become jumpy. 

     It looks like the update panel is setting the scroll position back to what the original scroll position was when they first initiated the post.  Normally this wouldn't be a problem, but with this page it can take a second or two for the update to finish some times and it really starts to bug you after a while.  Is there any way to turn this behavior of the update panel off or to stop it from happening?

    Thanks in advance for the help,

    James Hollister
    Ascending Integration, Inc.
    www.AscendingIntegration.com

    Monday, September 10, 2007 7:07 PM

Answers

  • User1406895847 posted

    Usually People loves to maintain the scroll postiion. But requirment is reverse, Here is the trick, create an script tag after the scriptmanager and put the following lines:
     

    <script type="text/javascript">
    
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    
    prm.add_beginRequest(beginRequest);
    
    function beginRequest()
    {
        prm._scrollPosition = null;
    }
    
    </script>
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 12, 2007 2:59 AM

All replies

  • User555306248 posted

    http://aspnet.4guysfromrolla.com/articles/111704-1.aspx

    <pages smartNavigation="true" MaintainScrollPositionOnPostback="true" />

    Lety me know if this helpful to you

    Monday, September 10, 2007 11:35 PM
  • User-2131478286 posted

    Nope tried that already didn't work.  Also tried removing my update progress control.  Don't think this issue is more to do with the update panel specifically, because the page isn't actually posting back and refreshing.  I'm thinking its a behavior that they intended to have, because their script must be remembering the scroll position from when the async post was initiated and resetting it when the response comes back, I just need to know if there's a way to turn it off or interupt it somehow.

    Tuesday, September 11, 2007 11:33 AM
  • User923504599 posted

    Have a look here: http://support.microsoft.com/kb/913721

    -Damien

    Tuesday, September 11, 2007 11:36 AM
  • User-2131478286 posted

    Does the UpdatePanel have any knowledge about smart navigation?  I don't see how that would have any effect on the update panel, because the full page isn't posting back and refreshing. 

    Tuesday, September 11, 2007 11:51 AM
  • User-2131478286 posted

    Yea I saw that article in my searches too, but I think hes dealing with a different problem than me.  His stems from having an overflow, scrolling div.  My problem is just because the page is longer than the screen height.  I put together a simple page to test my scenerio and make sure it wasn't something else I was doing that was causing the behavior.  It basically just has a button in the middle of a bunch of block returns to make the page long.  The button sleeps the current thread for 5 seconds to simulate a long running process.  If you run the page below, scroll to the middle, click the button, scroll to the top and then wait 5 seconds, I think you'll see what I mean.  I basically just want the scroll position to stay where it currently is after the updatepanel is done processing.  Thanks again for the help.

     

    <%@ Page Language="C#" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">

    private void btnTesting_Click(object sender, EventArgs e)

    {

    System.Threading.
    Thread.Sleep(5000);

    }

     

    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

    <title>Untitled Page</title>

    </head>

    <body>

    <form id="form1" runat="server">

     

     

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">

    </asp:ScriptManager>

     

     

    <asp:UpdatePanel ID="UpdatePanel1" Runat="server" UpdateMode="Always">

    <ContentTemplate>

     

     

    <div>

     

    TEXT Here

     

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

     

    TEXT 2 Here

     

    <asp:Button ID="btnTesting" runat="server" Text="Test" OnClick="btnTesting_Click" />

     

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

     

    TEXT 3 Here

     

     

    </ContentTemplate>

    </asp:UpdatePanel>

     

     

    </div>

    </form>

    </body>

    </html>

    Tuesday, September 11, 2007 4:19 PM
  • User555306248 posted

    Have you solved your problem

    Tuesday, September 11, 2007 11:27 PM
  • User1406895847 posted

    Usually People loves to maintain the scroll postiion. But requirment is reverse, Here is the trick, create an script tag after the scriptmanager and put the following lines:
     

    <script type="text/javascript">
    
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    
    prm.add_beginRequest(beginRequest);
    
    function beginRequest()
    {
        prm._scrollPosition = null;
    }
    
    </script>
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 12, 2007 2:59 AM
  • User-2131478286 posted

    Awesome, that is exactly what i was looking for.  I knew there had to be a way to tell it not to do that.  Thanks so much!

    Wednesday, September 12, 2007 11:43 AM
  • User555306248 posted

    Thats great [:)]

    Wednesday, September 12, 2007 11:36 PM
  • User-692169967 posted

    hello!

     I see this fix for the scrolling panel works for some people..

    How do you mean create a script tag then copy the javascript in?

     

    Like this?

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <script type="text/javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_beginRequest(beginRequest);

    function beginRequest()

    {

    prm._scrollPosition =
    null;

    }

    </script>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

     

    Sorry, i'm new to the update panel...

    thanks

    Iain

    Thursday, March 20, 2008 8:09 AM
  • User-771765603 posted

    yes. that works for me.

    Wednesday, March 26, 2008 6:14 PM
  • User1696744559 posted

    Great Rashid Bhai.........................

    It Help me a lot

    Thanks........................dear 

    Tuesday, April 15, 2008 6:21 AM
  • User1281381861 posted

    HI KaziManzurRashid ,

    Ur solution was excellent !

    It solved my Problem.

    Thanxs Alot[:D]

    Wednesday, September 17, 2008 6:14 AM
  • User-238964167 posted

    Thanks For the help ...

    But my project contains ajax master page ..then where i need to put this code ....

    in master page ...

    or  else...


    Monday, January 10, 2011 3:04 AM
  • User-238964167 posted

    add Div inside updatePanle and this ll going to work

    <script type="text/javascript"> var xPos, yPos; var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_beginRequest(BeginRequestHandler); prm.add_endRequest(EndRequestHandler); function BeginRequestHandler(sender, args) { xPos = $get('scrollDiv').scrollLeft; yPos = $get('scrollDiv').scrollTop; } function EndRequestHandler(sender, args) { $get('scrollDiv').scrollLeft = xPos; $get('scrollDiv').scrollTop = yPos; } </script>

    Thursday, March 24, 2011 6:51 AM
  • User-1763508608 posted

    @KaziManzurRashid. Are you GOD? It just resolved my issue by adding this script... and you gave the solution in 2007.

    Thanks man.

    Friday, February 22, 2013 6:52 PM
  • User1659571214 posted

    HELLO DEAR,

    I HAVE A USER CONTROL THAT CONTAIN DROPDOWN HIERARCHY IN MY PAGE. WHENE SELECTED INDEX CHANGED FIRED SCROLL POSITION HAS RESET PLZ GIVE THE SOLUTION.YOUR JAVASCRIPT CODE NOT WORKING IN MY SITUATION. HELP PLZ.....

    Saturday, March 30, 2013 3:10 AM