Scroll Position Reset "jerks"

[Frinavale]

I think I'm trying to do something impossible.

I have a <div> element with a overflow style set to "scroll". In other words my <div> element allows the user to scroll the content within it.

There are a number of elements within this <div> that cause the <div> to participate in an Ajax call to the server.

In order to maintain the scroll position of the <div> during the Ajax request I store the scroll value in a hidden field so that when the Ajax request returns to the browser I can call a JavaScript function that retrieves this value and resets the scroll position of the <div>.

Everything's doing what it should except that in some browsers the process is very apparent when the scroll position is reset upon returning from the Ajax request. Let me try to explain this better.

The scroll position of the <div> is set to 0 when the Ajax request returns and then after everything has loaded the JavaScript is called to reset the scroll position to it's last value. There is a Split second where the content is redrawn at the 0 position and when the scroll is reset to it's previous position the content (and scroll bar) "jerks" into the right position.

I am trying to get rid of the "jerkyness" but I have No idea how to solve this problem.

I thought that if I placed the content of the scrollable <div> into another child <div>, that maybe I could set the scroll position of the scrollable <div> before the child <div> loaded but apparently I can't do this. (I cannot set the scroll position larger than the maximum that the content can be scrolled and since the content isn't loaded it's 0 ...so you can see why I'm having problems with this attempt.)

Does anyone have any pointers on how to solve this problem?

Thanks!

-Frinny

[gits]

i'm trying to follow ;) ... is there much content in that div? in case there are not a lot of nodes i would try to just clone the div node and place it 'over' the div in question. now do everything in the 'hidden' or better invisible div and then remove the 'masking' div ... or do you have a scroll-animation that you want to have explicitly shown on the scroll-operation?

kind regards

[Frinavale]

I'm not following you with regards to the "cloning" thing.

In my case there is a table that has 40 columns and 512 rows of hyperlinks (plus any links in the headers or the "row headers" down the side). So, the content is quite large.

I do not want the scrolling process to be animated, it should not be apparent at all really. When the user clicks one of the links it posts to the server which updates some content in a different section on the page with the details of what they clicked on.

I'm interested in your "cloning" idea. Could you please elaborate?

Thanks :)

-Frinny

[hsriat]

I was wondering if setting the overflow to fixed temporarily just after sending the request, and changing it back to auto when request completed would do something useful for you.

[gits]

i was talking about cloneNode() and setting a z-index of 1000 or something like that ... and placing the cloned node absolutely over the 'base' node ... but may be hsriat's idea would work and you could forget about the 'cloning' idea :) ....

kind regards

[Frinavale]

What?

The overflow property cannot be set to a value of "fixed".

Did you mean to suggest setting the position property to "fixed"?

I tried this (setting the position property to fixed) and it seemed fixed the "jerk" effect (in IE8) but it's causing other problems: it moves the element to the left side of the screen over top of the rest of the content which is particularly bad in my page.

I changed the position property to "relative" instead and this "sort of" fixes the problem:

In IE8: the scroll bar and content still "jerks".

In IE7: the scroll bar and content still "jerks".

In FireFox3: the content blinks (disappears then reappears) when the position property is set to relative; the scroll bar still "jerks" but the content does not.

In FireFox2: the process is even more apparent because it takes longer to happen: the content is set to 0, both scroll bars appear and are enabled (even though the vertical one is not needed), the content is moved to the new position and the vertical scroll bar is disabled. The whole thing is about a second or two and it really isn't nice (I thought it was broken at first).

Chrome: works fine.

Safari: works fine.

[edit]
I changed the implementation so that the scrollable <div> always has a relative position by default. I am no longer setting this property using JavaScript...

This seems to have fixed the slow load time in FireFox 2 (but the scroll bars still appear and "jerk"... however the content does not "jerk") and has gotten rid of the blink problem in FireFox 3 but the horizontal scroll bar still jerks.
[/edit]

This solution is not quite up to my liking. I'm going to continue to look for a better one since it doesn't solve the problem in IE... but it was a good suggestion. Thanks a lot.



-Frinny

[Frinavale]

I removed the relative position and tested in all browsers and discovered that this actually doesn't change anything.

The symptoms described in my last post exists regardless of setting the element's position to relative....it doesn't make any difference.

-Frinny

[acoder]

How about the scrollIntoView() method?

[Frinavale]

I never knew that method existed, thanks acoder.

I tried it using the w3c schools "try-it" utility and I can see that it'd be useful in certain scenarios :)

The main problem I have with using this method is that I'd have to track which element caused the Ajax call in order call it. It would be difficult for me to track this element (I'm not sure how I would go about doing that really)

Right now, I'm setting the scrollLeft property of the <div> which scrolls to the scrollLeft position that the <div> had before the Ajax call. I am able to track the scrollLeft position because of the nature of my JavaScript (and .NET ) Objects.

Call me lazy, but I don't want to spend a few days researching/attempting to track child .net controls in a JavaScript enabled Server control in order to try out this method in my application.

There wasn't a lot of documentation on this method.... Do you think it somehow help in preventing the <div>'s contents from being drawn at 0,0?

[acoder]

scrollIntoView() is not part of any specification, but it's a useful enough method that most browser vendors saw fit to include support for it. I don't know exactly how it's implemented.

I'm afraid I don't have much experience with .NET, so I can't help much on that front. I thought you knew or at least could easily find out which element was the target/source in which case this method would be useful.

[hsriat]

@Frinavale
Apologies, but I meant to suggest to set scroll to hidden (temporarily)... got confused hidden with fixed.

[Frinavale]

@hsriat
Ahh, I see.

I tried it but this did not help the situation....it just made the scroll bars disappear for split second.

Thanks for the recommendation.

[gits]

so now you seem to be interested enough in the first mentioned 'clone-overlay' workaround? :) .... i'm not sure whether this wold be the best solution but i guess it would be a quite simple hack that gives you time to find a better solution later on :) .... just retrieve the div node, its position and then cloneNode(true) it ... place it absolutely over the 'scrolling'-div and remove the cloned node when the content should be ready ...