Remember a Div's Scroll Position
A person asked the question on how to remember a div's scroll position on the page when the comes back to the page. It is rather easy to do and it involves a session cookie to remember the position. Yeah, the cookie part could be done better so do not comment on that! I went the easy route!
<html>
<head>
<title>Fun Scroll</title>
<style type="text/css">
#divTest{width:150px;height:200px;overflow:auto}
</style>
<script type="text/javascript">
window.onload = function(){
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0){
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById("divTest").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("divTest").scrollTop;
document.title = intY;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
</head>
<body>
<div id="divTest" onscroll="SetDivPosition()">
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
ERIC<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
</div>
</body>
</html>
Hope it helps,
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Co-Author of Ajax In Action
TrackBacks[0]
Comments[25]
Posted by pascarello on July 18, 2005 12:55:16 PM EST
Reply |
Permalink
Re: Remember a Div's Scroll Position
This tip is absolutely top class!
Comment from Anonymous on August 2, 2005 11:31:54 AM EST
Thanku so much for a very very useful script.
Comment from Anonymous on May 17, 2006 7:10:21 AM EST
Thanks for the tip!
Comment from corey on August 6, 2005 3:56:01 PM EST
awesome tip for retaining scroll position when using a datagrid!
Comment from Anonymous on September 1, 2005 4:20:25 AM EST
That's helpful. But isn't a cookie very slow? Doesn't every change in the scroll position imply writing to disk? How would you do it otherwise? Hidden fields?
Comment from Anonymous on October 28, 2005 4:45:45 AM EST
You could write it to a hidden field on the page or the cookie. The IO to the cookie can be slow, I have not seen any problems with this script yet, could do something with a timer in it to limit rewrites which I have in the works. With that said I actually have plans to update this script a little more, should be up next week.
Eric
Eric
Comment from Eric Pascarello on October 28, 2005 8:38:43 AM EST
Thanks a lot for the tip. I spent a lot of time trying to find out this solution for the datagrid/div remember position. It works great with the cookie, however I could not get it to work with the hidden field. Is there some gotcha involved with that approach?
Comment from Anonymous on December 30, 2005 6:26:05 PM EST
Thanks a lot Eric for the help.. got it working with a hidden field.. with ASp.net 2.0.. needed to make the hidden field run at server for it to actually hold on to the value.. strange but works great..
Comment from Kartik on March 19, 2007 3:03:57 PM EST
Thanks for your code.
Comment from İbrahim Uludağ on January 3, 2006 6:11:34 AM EST
Thanks very much for the tip!!!!
Matteo
Comment from Anonymous on January 18, 2006 10:36:42 AM EST
Thanks . Small code big solution.
Comment from Devendra on January 19, 2006 8:05:48 AM EST
Thanks for this very usefull script! It works perfectly.
Comment from Daan on January 26, 2006 4:23:38 PM EST
Thank you! Thank you! Thank you!
You just saved me so many late nights!
Again, thank you!
Comment from Jon Humphrey on April 21, 2006 10:34:37 AM EST
Read so many long, convoluted solutions. This is the only one that really worked. And nice and compact to boot. Thank you very much.
Comment from Anonymous on May 21, 2006 2:30:18 PM EST
Hi
I needed to make a scrollable div, and i did it, but i have the following problem: when i try to run my resulting page in Internet Explorer, it doesn't work. No matter what value i put in my cookie, when i load it, and try to set the value to div's scrollTop position, it doesn't put's me a value larger than 20 and in some cases, 40. I mention that in Firefox, it's running smoothly, whithout any kind of problems.
I would appreciate any kind of help, here, or on my e-mail address, as i really need to make it work with Internet Explorer
If someone can help, please, contact me
(johnny_r3d@yahoo.com)
Thank you
Comment from Johnny Cra$h on May 24, 2006 11:04:32 AM EST
Hello,
The script works fine in Firefox browser, but I guess there is a bug in IE 6, because if having a scroll > 28, the page will be reloaded with this value as scroll.
Actually we wrote our own code, and while searching for clues to this problem I found this nice script, which could have saved us some time.
Anyway, I saw that a way to solve this problem is to assign the scrollTop property twice. So instead of
Actually we wrote our own code, and while searching for clues to this problem I found this nice script, which could have saved us some time.
Anyway, I saw that a way to solve this problem is to assign the scrollTop property twice. So instead of
document.getElementById("divTest").scrollTop = strPos;
I have:
document.getElementById("divTest").scrollTop = strPos;
document.getElementById("divTest").scrollTop = strPos;
and it seems to work.
I hope I've been of some help.
Comment from Cristian Spiescu on May 24, 2006 3:10:40 PM EST
Very helpfull, thank you. I tested on mozzila firefox 1.5.0.3 and it worked, but it doesn't worked on IE 6.0. is there something I must do with the IE setting? sorry for my poor english
Comment from Nelson on May 26, 2006 4:58:57 AM EST
Hi, This seems very cool! But can you guys make it work horizontaly? Thanx!
Comment from Anonymous on October 9, 2006 8:40:39 AM EST
Thanks. Saved my day.
Comment from Anonymous on December 15, 2006 5:05:09 PM EST
This works great for me in firefox. I cannot get it to work in IE 6 or 7. Has anyone solved this yet? Also to minimize writes to disk I believe there is a window.unload event that you might be able to tie into so you only have to write to the cookie once. That being said I haven't seen any slowness using the script on my local dev machine and it isn't server strength.
Comment from Justin L on January 16, 2007 12:02:43 PM EST
The cookie part could have been done better you know
Comment from Anonymous on January 25, 2007 6:25:55 AM EST
Excellent!!!
But, how can we adapt this idea to a panel.
I have my grids in panels because there are 3 of them on the page, one on the left and 2 on the right that feed off the selection made in the first one. The search text box searches for a match in the first grid and selects the correct row but if it is way down the grid I cannot get it to programmaticaly scroll down to the selected row.
Comment from Anonymous on March 22, 2007 12:45:23 PM EST
hey,
I tried the given script on to an asp:Panel and it does the thing alright. The only problem is that it flickers too much because the scroll first goes to the top and then comes down.
Any suggestions for it??
Thanks,
Ashwani
Comment from Ashwani on April 16, 2007 5:05:28 AM EST
Very, very usefull, thank you Eric !
Comment from chris on May 9, 2007 8:34:23 AM EST
Thank You. Indeed a Very nice and excellent Solution to retain scroll position on post back. Thanks Again.
Comment from Waqas on May 10, 2007 6:14:28 AM EST
TrackBack to http://radio.javaranch.com/pascarello/addTrackBack.action?entry=1121709316718