473,839 Members | 1,414 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Scroll Position Reset "jerks"

9,735 Recognized Expert Moderator Expert
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?


Apr 9 '09 #1
12 7895
5,390 Recognized Expert Moderator Expert
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
Apr 10 '09 #2
9,735 Recognized Expert Moderator Expert
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 :)

Apr 10 '09 #3
1,654 Recognized Expert Top Contributor
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.
Apr 10 '09 #4
5,390 Recognized Expert Moderator Expert
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
Apr 11 '09 #5
9,735 Recognized Expert Moderator Expert

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.

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.

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.

Apr 13 '09 #6
9,735 Recognized Expert Moderator Expert
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.

Apr 13 '09 #7
16,027 Recognized Expert Moderator MVP
How about the scrollIntoView( ) method?
Apr 13 '09 #8
9,735 Recognized Expert Moderator Expert
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?
Apr 13 '09 #9
16,027 Recognized Expert Moderator MVP
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.
Apr 14 '09 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

by: maniac | last post by:
Hey guys, I'm new here, just a simple question. I'm learning to Program in C, and I was recommended a book called, "Mastering C Pointers", just asking if any of you have read it, and if it's worth the $25USD. I'm just looking for a book on Pointers, because from what I've read it's one of the toughest topics to understand. thanks in advanced.
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.