+ Start a Discussion

reRender Visualforce reset scroll page position



When actionSupport component rerender other visualforce components, scrollbar page is reset to top but I would  like to keep position of page.  Any solution?


Thanks in advance.


When you specify a node(s) to rerender, the action is going to clobber everything inside that node just before the completed event (though after beforedomupdate). So you could attach custom javascript to "beforedomupdate", to read/store the scrollTop property (preferrably via jQuery), and the attach more script to "completed" to consume and re-instate that stored value. You could even write a jquery plugin with 2 actions (pushScrollState, popScrollState) to do this for all child "scrollable" containers in a given scope.


However, that's not usually the simplest solution -- typically you should first try to avoid clobbering your scrollable in the first place -- then your scoll states will remain unadultered. That means limiting your rerender to nodes that do NOT contain your scrollable (i.e. only rerender child nodes within your scrollable).


I have run into issues, writing more complex pages, where it becomes extremely awkward to rely upon rerenders for certain actions, precisely because i does clobber entire DOM subtrees -- sometimes you want to say, add a style class to a node without clobbering it. In those cases, it's best to move the display functionality to the client, abstracting as much of it as you can away into a jQuery plugin.



Thank you. I'm trying to use the  scrollTop property but  it does not work.


<apex:page standardController="CustomObject__c" extensions="customObjectcontroller" showHeader="true">
 <apex:pageMessages id="sms" />
 <script language="javascript">
  // function saves scroll position 
   function pushScrollState(val)
    var hidScroll = document.getElementById('inField');
    hidScroll.value = val.scrollTop;
  // function moves scroll position to saved value 
  function popScrollState(what)
   var hidScroll = document.getElementById('inField');
   document.getElementById(what).scrollTop = hidScroll.value;
  <body onload="popScrollState('Scroll');" > 
   <apex:form id="Form">
    <apex:inputField id="inField" value="{!customObject.lookup1__c}" >
     <apex:actionSupport rerender="sms,Form" event="onchange" action="{!inputLookup1}"> 
      <div id="Scroll" onscroll="pushScrollState(this);"/> 





Alex Skempris9Alex Skempris9
Hi David, 

Has any solution been found to that problem please?